Question

我想知道是否可以使用多列分割布局，其中每个浮动div的动态宽度为100％/ n。

所以，如果我有以下结构

<div id="mycontainer">
    <div class="split">
        LOREM
    </div>
    <div class="split">
        IPSUM
    </div>
</div>

生成的css类似于：

.split {
    float: left;
    width: 50%;
}

.split:last-child {
    float: right;
}

其中

<div id="mycontainer">
    <div class="split">
        LOREM
    </div>
    <div class="split">
        IPSUM
    </div>
    <div class="split">
        DOLOR
    </div>
</div>

会导致

.split {
    float: left;
    width: 33.33%;
}

等等。我更喜欢简单的CSS解决方案，我知道通常可以通过 ~~jQuery~~ javascript轻松实现。

Answer 1

一个纯CSS 解决方案是将我们的DIV伪造成我们亲爱的table，但是，嘿，为什么不呢！这是一个有效的解决方案。

http://jsbin.com/amequw/1/edit

#mycontainer{
  background:#eee;
  padding:10px 0;
  display:table;      /* Fake :) */
  width:100%;
}
.split{
  background:#eee;
  display:table-cell; /* Act! */
}

这是一个只有一个.split的演示：

http://jsbin.com/amequw/2/edit

Answer 2

你可以为twocolumn，threecolumn，fourcolumn等使用不同的类。所以你的CSS看起来像这样：

.column { float: left; }
.column-right { /* Just in case */ }

.twocolumn .column { width: 50%; }
.threecolumn .column { width: 33%; } 
 /* ... */

和您的HTML一样

<div class="twocolumn">
     <div class="column column-left">Split</div>
     <div class="column column-right">Split</div>
</div>

或

<div class="threecolumn">
     <div class="column column-left">Split</div>
     <div class="column">Split</div>
     <div class="column column-right">Split</div>
</div>

Answer 3

结帐Flexible boxes目前不确定他们的支持程度，但这可以达到你想要的效果，或display: table

Answer 4

如果您正在使用纯CSS解决方案，那么您可能希望使用网格设置，例如Foundation's，这涉及使用预定义类的组合来布局元素。

Answer 5

尝试使用javascript / jquery来计算分割数

var numItems = $('.split').length;

var percentage = 100/numItems;

$(".split").css("width",percentage+"%");

我没有测试过代码但可能值得一试

使用CSS动态拆分/行（按百分比）布局

5 个答案: