Question

我在容器中有一些浮动div：

+----------+
| [] [] [] |
| [] [] [] |
| []       |
+----------+

这些div具有特定的宽度（300px），我希望尽可能多地适合。

但是div也应该填补余下的空间，例如：容器宽度1050px = 3个div适合， div应调整大小以填充剩余的150px（div宽度= 350px），直到容器宽度达到1200px（=连续4个div）。

+---------+
| [ ] [ ] |
| [ ] [ ] |
| [ ]     |
+---------+

所以我想要某种最小宽度。是否有任何jQuery插件可以做到这一点或一些简单的CSS？

Answer 1

实际上，这可以通过float

轻松完成

<强> HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="clear"></div>
</div>

<强> CSS

.parent {
    border :1px solid red;
    width:105px;
    height:auto;
}
.child{
    float:left;
    width:30px;
    height:10px;
    border:1px solid blue;
}
.clear{
    clear:both;
}

以下是Fiddle

但是对于良好的练习，您可以了解Flex Layout。

Answer 2

我相信这更接近您所寻找的目标：

HTML：

<div class="container">
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
    <div class="innercell">Something</div>
</div>

CSS：

.container {
    border :3px solid red;
    width:1000px; /* Change to 100% and drag the frame to see the 'cells' grow */
    display: -webkit-flex;
    padding: 5px 5px 5px 5px;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -webkit-align-items: center;
}



.innercell {
    float:left;
    width:300px;
    border:2px solid green;
    -webkit-order: 2;
    -webkit-flex-grow: 1;
    -webkit-flex-shrink: 1;
    margin: 5px 5px 5px 5px;
}

http://jsfiddle.net/pAmfj/3/

div会随着更大的容器div而增长。

供参考： http://www.vanseodesign.com/blog/demo/flexbox/flex.html

调整浮动div以填充容器宽度

2 个答案: