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

Question

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

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

这些 div 有一个特定的宽度（300 像素），我想尽可能多地排成一行。

但是 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;
}

这是小提琴

但是为了获得良好的实践，您可以了解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