Question

我有一个包含子框的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。

如何使父盒子在子盒子宽度的倍数之间，子节点填充父节点的宽度。因此，例如，如果父框的宽度为660px，则每个子框的宽度为660px / 4或165px。 我还应该提一下，如果父框的宽度发生变化，孩子应该相应地改变。

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

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

我已经研究过使用flexbox，但遗憾的是Firefox目前仅支持单行Flexbox，因此当我尝试使用时，儿童flex项目会从flex容器中挤出并溢出。

编辑：

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

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

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

Answer 1

试试这个fiddle

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'})

Answer 2

有一种更简单的方法（基于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具有更大的最小宽度时的情况，例如，如果您将最小宽度设置为250px，并且所需的最大宽度为500px，则列数不可能达到6或更多（500x5 = 3000px）。

评论赞赏。

浮动填充宽度框

2 个答案: