css - 在网格中布置不同高度的div

Question

我有一个网站，我想像这张图片那样布局:

红色是桌面版，黄色是移动版。我可以使用媒体查询轻松地在两者之间切换。

我的问题是如何为桌面版编写 CSS - 我只包括移动版，因为布局排除了桌面版的一些布局技术。

每一对中的内容(例如 A 和 B)可以有不同的高度，但它们非常相似，我想将它们布置成相同的高度，以便下一对标题对齐。

我想最简单的方法是对每对的高度进行硬编码，但我宁愿尽可能避免这种情况。

Answer 1

您应该为这些元素使用一个容器。

例如 <ul>元素本身是 <li>元素。

示例 html

<ul class="container">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

桌面 CSS

ul.container li{
  width:45%;
  margin-right:5%;
  float:left;
}

ul.container li:nth-child(odd){
  clear:left;
}

移动 CSS

ul.container li{
  width:100%;
}

演示在 http://jsfiddle.net/gaby/AgNjB/1

---

注意事项

如果您只想排列它们的标题(左右顶部在同一位置)，上面的代码就可以工作。但如果您希望它们的实际高度也对齐(例如底部边框)，则需要进行更改。