0

我需要这样来：

在此处输入图像描述

块的数量可以不同。

jsbin

4

4 回答 4

1

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

演示：http: //jsfiddle.net/mqchen/VEmCK/

.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/

于 2013-08-15T13:20:27.613 回答
1

为什么选择 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%; }
于 2013-08-15T13:24:05.007 回答
0

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

于 2013-08-15T13:20:15.413 回答
0

我已经看过几次了，在我看来这是解决这个问题的最佳方法：Fluid width with equal spaced DIVs

基本上，您在列表底部使用带有伸展器类的跨度，并在 ul/container 元素上为导航添加“文本对齐：对齐”。

<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/

于 2013-08-15T13:41:26.087 回答