Question

我希望找到一种方法来创建一个带有可变高度元素的简单双列列表，而不使用列的两个包装元素或任何javascript。

https://stackoverflow.com/a/16821155/2026098提到向左浮动奇数元素而向右移动偶数元素可能会起作用，但是当元素的高度变化太大时，它似乎失败了。

<div class="two-column-list">
  <div class="element odd">A few words</div>
  <div class="element even">A few sentences</div>
  <div class="element odd">Many paragraphs</div>
  <div class="element even">One sentence</div>
  <div class="element odd">Many paragraphs</div>
</div>


.element.odd  { float: left; }
.element.even { float: right; }

请参阅 http://jsfiddle.net/PF62T/3/ 。

灰色框是奇数，红色框是偶数。当其中一个奇数框不够高时，最后一个偶数（红色框），即使向右浮动，似乎也想要占据左边的可用空间。有什么方法可以强迫盒子始终坚持左边缘或右边缘，无论它们的高度如何？

我不想使用CSS3列，因为我需要支持IE8 +。我正在使用angular，所以我可以轻松地为奇数和偶数元素添加不同的类，所以这也不是问题。

我意识到使用两个包装器将是最可靠的解决方案，但我感觉答案就在那里：P我不想要包装元素的主要原因是我需要在一个列中显示所有元素在移动设备上，在这种情况下包装器会弄乱他们的订单。

Answer 1

您可以使用clear:left;对浮动的左侧元素和clear:right使用浮动的右侧元素来解决此问题。

请参阅 FIDDLE

div:nth-child(odd) {
    float: left;
    clear:left; /* ADD THIS */
    background-color: red;
}

div:nth-child(even) { 
    float: right; 
    clear:right; /* ADD THIS */
}

没有两个列表/包装器的两列列表

1 个答案: