Question

我认为这个问题更多地涉及css而不是bootstrap。

以两列布局自然浮动div。

案例B：当右侧比左侧长时，可以接受。

案例C：当左侧较长时，下一行的第一个div（＃3）潜入此行的较短右侧（＃2），这仍然是可以接受的，但是＃4去了与＃3对角，这太糟糕了。

案例D：可以用行包装每两个div，但这是一个丑陋的解决方案。

问题：是否有可能自然地输出一个父母下的所有四个元素，每个元素可能有不同的类，以便像D一样存档？

production.rb

Answer 1

您可以使用CSS列实现此外观

http://jsfiddle.net/ericjbasti/Ltsjaaa2/5/

我做的最大改变是添加了这个css

.columns{
    -webkit-column-count: 2;
    -webkit-column-gap: 1px;
    -moz-column-count: 2;
    -moz-column-gap: 1px;
    column-count: 2;
    column-gap: 1px;
}

并修改html看起来像这样

<div class="row columns"> 

    <div class="cell cell-vert-pad col-xs-12">
        1<br/>C<br/><br/><br/>
    </div>

    <div class="cell2 cell cell-vert-pad col-xs-12">
        2<br/><br/><br/>
    </div>

    <div class="cell cell-vert-pad col-xs-12">
        3<br/><br/><br/>
    </div>

    <div class="cell cell-vert-pad col-xs-12">
        4<br/><br/><br/>
    </div>

</div><!-- .row -->

基本添加.columns类并将列的宽度更改为xs-12

IE直到v10才支持此功能。

Answer 2

尝试nth-child(odd)强制每一个元素到左侧：

.ribbon2 {
  float: left;
  width: 200px;
  margin: 5px;
  border: 10px solid black;
  background-color: black;
}

.cell {
  outline: 1px solid blue;
  font-size: 24px;
  background-color: white;
}

.cell:nth-child(odd) {
  clear:left;
}

<div class="ribbon2">
  <div class="cell col-xs-6" style="height:6em;">1</div>
  <div class="cell col-xs-6" style="height:4em;">2</div>
  <div class="cell col-xs-6" style="height:4em;">3</div>
  <div class="cell col-xs-6" style="height:5em;">4</div>
  <div class="cell col-xs-6" style="height:4em;">5</div>
  <div class="cell col-xs-6" style="height:4em;">6</div>
</div>

http://jsfiddle.net/Ltsjaaa2/6/

自然漂浮不均匀高的div成排

2 个答案: