1

我想知道是否可以有一个多列拆分布局，其中每个浮动 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轻松实现。

4

5 回答 5

6

一个纯粹的 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

于 2013-07-10T11:46:21.157 回答
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>
于 2013-07-10T11:48:56.220 回答
1

查看灵活框不确定目前对它们的支持程度，但这会满足您的需求或display: table

于 2013-07-10T11:44:52.090 回答
0

如果您追求纯 CSS 解决方案，那么您可能想要使用诸如Foundation 之类的网格设置，其中涉及使用预定义类的组合来布局您的元素。

于 2013-07-10T11:43:37.187 回答
-1

尝试使用 javascript/jquery 计算拆分次数

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

var percentage = 100/numItems;

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

我没有测试过代码，但也许值得一试

于 2013-07-10T11:44:53.097 回答