0

我有一个div（或section，或其他一些块级元素）包含子框。

<section>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    <div>Box 6</div>
    <div>Box 7</div>
    <div>Box 8</div>
    <div>Box 9</div>
    <div>Box 10</div>
</section>

每个子框都有一个最小宽度（例如 150px）并且它们都向左浮动。因此，如果父容器是[450, 600) px宽的，则连续有 3 个，类似地，如果父容器是宽的，[600, 750) px则将有 4 个，依此类推。

section {
    min-width: 150px;
    font-family: 'Segoe UI', Ubuntu, sans-serif;
}

div {
    min-width: 150px;
    height: 150px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    float: left;
    margin: 0 3px 3px 0;
    padding: 3px;
    background-color: lightblue;
    border: 1px solid #000;
}

请参阅jsFiddle。

如何做到这一点，如果父框在子框宽度的倍数之间，则子框填充父框的宽度。例如，如果父框的宽度为 660 像素，那么每个子框的宽度将是 660 像素/4 或 165 像素。我还应该提到，如果父框的宽度发生变化，子框也应该相应地改变。

在我的特定情况下，我可以使用媒体查询来执行此操作，因为幸运的是父框取决于视口宽度，但我正在寻找一个通用的解决方案，因为可能在其他地方父框是真正可变的。此外，必须将每个案例都放入带有widthand的媒体查询中也变得乏味max-width。

我的兼容性要求是现代浏览器（IE 10+、Firefox、Chrome、Safari）。我不介意使用一点 JavaScript/jQuery，但它应该在 IE 9 中优雅地降级。不支持 IE 8，所以这不是问题。

我已经研究过使用 flexbox，但不幸的是，到目前为止，Firefox 只支持单行 flexbox，所以当我尝试它时，子 flex 项目会挤压并溢出 flex 容器。

编辑：

我按照下面 Siddhartha Gupta 的回答开始使用 JavaScript，但是在某些点似乎存在一个奇怪的错误，即行没有填满整个空间。（如果没有足够的子元素，所有行都应填充 100%，除了最后一行。）

$(window).resize(function () {
    var sectionWidth = $('section').width(),
        childWidth = (sectionWidth / Math.floor(sectionWidth/150)) - 3;

    $('section').children().css({
        'width': childWidth + 'px'
    });
});
4

2 回答 2

1

试试这个小提琴

var sectionWidth = $('section').width();

//Lets calculate width of each child
//Divided parent width with the no of childs you want to show
//Then subtract 2px from it (fix for border px's)
//Again subtract 2px from it (fix for padding px's)
var childWidth = sectionWidth/8 - 2 - 2;

//Lets apply the width to each child
//Also need to remove min-width
$('section').children().css({'min-width': 0, 'width': childWidth + 'px'})
于 2013-07-30T06:04:29.453 回答
0

有一种更简单的方法可以做到这一点（基于 S.Gupta 的回答）

var a;
function somefunc(){
var sectionWidth = $('section').width();  
var minChildWidth = 150; // specify min-width here  
var k = Math.floor(sectionWidth/minChildWidth);
if(k!=a){
k = 100/k;  
$('section').children().css({'width': k + '%'});
}
a=k;
}

我相信这是一种更好的方法，因为它不会每次都计算和应用宽度。这就是 %-widths 的用途。如果你不能达到预期的结果，试着从最终的 k 中减去 0.1 或 0.5%。如果您需要更精确的结果，请为 div 制作一个包装器，并将边框和边距应用于内部容器，为包装器设置宽度。使用适当的盒子尺寸，它应该可以做到这一点。

那些宁愿不使用 jQuery 的人可以考虑以下几点：

JS：

var a;
function foo(){
var s = getElementById('section_id');
var minW = 150; // desired min. width for inner divs
var sWidth = s.offsetWidth;
var k = Math.floor(); 
k = (k>5)?5:k;
if(a!=k)
s.className="m"+k;
a=k;
}

CSS： 

.m1 .inner_div {width:100%}
.m2 .inner_div {width:50%}
.m3 .inner_div {width:33.3%}
.m4 .inner_div {width:25%}
.m5 .inner_div {width:20%}
...
.section {width:100%}

这种方法的局限性是显而易见的（此示例中的最大行数为 5）。但是，它可以在某些情况下应用。想象一下，当用户决定调整窗口大小时，您在一个部分中有 100 多个 div。下面的答案会导致一个循环，尽管所有 div 在调整大小时以像素为单位硬编码元素的宽度数次。我敢打赌这样的动画不够流畅。

--
当列数有限时，可以应用不使用 jQuery 的解决方案，当内部 div 具有更大的 min-width 时，例如，如果您将 min-width 设置为 250px，并且所需的 max-width 为 500px，则列数不太可能达到 6 或更多 (500x5=3000px)。

评论赞赏。

于 2013-09-04T03:34:36.853 回答