在网格中布置不同高度的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

演示

---

<强>通知

如果您只想对其标题进行排队（左侧和右侧顶部位于同一位置），则上述代码有效。但是如果你想让他们的实际高度也排成一行，那就需要改变（例如用于底部边框）。