Question

我需要这样来：

enter image description here

块的数量可以不同。

Answer 1

由于这个问题用css3标记，我将建议一个css3解决方案。

.wrap {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21+ */
    display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

    border: 1px solid black;
    padding: 1px;
    float: left;

    width: 100%;

    clear: both;
    margin-bottom: 20px;
}

.box {
    -ms-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    flex: 1;

    border: 1px solid red;
    padding: 5px 40px;
    margin-right: 30px;
}
    .wrap .box:last-child {
        margin-right: 0;
    }

（你需要调整尺寸以供自己使用，但我认为这可以大致了解它如何对你有用。）

此解决方案使用flexbox来对齐框。您可以在此处详细了解：http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

Answer 2

为什么选择flexbox或JS解决方案？您可以使用display：table和display：table-cell;

来完成此操作

http://jsfiddle.net/ygStV/

<div class="row">
 <div>1</div>
 <div>2Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
 <div>3</div>
</div>

.row { display: table; width: 100%; }
.row div { display: table-cell; width: 1%; }

Answer 3

您需要编写一个脚本来计算您拥有的div数，然后除以100并将其指定为宽度。如果你真的想要做得对，你也可以使用基础css框架为你做计算（至少宽度）。

Answer 4

我已经看过几次了，这是我认为最好的解决方法：Fluid width with equally spaced DIVs

基本上，您在列表底部使用带有担架类的范围，然后添加＆＃39; text-align：justify＆＃39;在您的导航的ul /容器元素上。

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

这是一个演示：http://jsfiddle.net/thirtydot/EDp8R/

CSS - 均匀地拉伸块

4 个答案: