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

Question

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

桌面：AB/CD/EF 移动：ABCDEF

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

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

每对中的内容（例如 A 和 B）可以有不同的高度，但它们足够相似，我想将它们布置为相同的高度，以便下一对标题对齐。

我猜最简单的方法是硬编码每对的高度，但如果可能的话，我宁愿避免这种情况。

score 1 · Accepted Answer

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

例如 a<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%;
}

注意

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

1 回答 1