如何用纯CSS创建等高列？

使用 CSS 创建等高列

等高列对于创建具有视觉吸引力的布局至关重要。虽然有多种方法，但一种有效的方法是使用纯 CSS。本教程揭开了该技术的神秘面纱，消除了它只是其他解决方案的重复的观念。

挑战

我们如何创建具有以下功能的列：

• 填充其父 div 的整个垂直空间
• 显示相等不依赖背景图像的高度

基于广泛的研究，我们发现了一个独特的解决方案。

答案

对于简单的方法，采用以下 CSS 技巧：

.parent {
  display: table;
}
.child {
  display: table-cell;
}

此技巧利用基于表格的显示属性。当父 div 呈现表格显示时，其子 div 成为表格单元格，继承相同的高度。

示例

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2</div>
  <div class="child">Column 3</div>
</div>

注意： IE7 不能很好地使用这种方法，需要更复杂的解决方案来实现向后兼容性。

以上是如何用纯CSS创建等高列？的详细内容。更多信息请关注PHP中文网其他相关文章！