Question

我读到了几个不同的解决方案来模拟等高的列或元素，但是它们都没有引起我的注意，因为它们使用的是黑客，非常复杂的HTML布局或者没有广泛支持的属性。

以下是示例Fiddle。

我的目标是确保所有元素具有相同的高度，或者至少是行中兄弟姐妹的最大高度。

一行由3个元素组成（在这种情况下，不存在行包装，但我可以考虑添加这样的容器元素）。

是否有解决方案：

不需要JS
doesn't use display: table
不使用带有负值的宽填充/边距
doesn't require exponential uses of divs and float

Answer 1

根据你所做的限制：不，没有。

编辑：因为你没有提到这个：你可以使用表格。（欢迎回到90年代）

Answer 2

您可以使用CSS3 flex 属性。写得像这样：

CSS

.parent{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    width:100%;
    min-height:200px;
}

.parent div{
    background:red;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    border:2px solid green;
}

<强> HTML

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

选中此http://jsfiddle.net/VkPmg/2/

Answer 3

如果您有固定宽度布局，可以通过背景图像伪造它。想象一下模拟边框的平铺图像背景，您只需在主容器中重复y。

例如，如果你有一个400px的容器，其中3个100px的盒子浮动（就像你的小提琴一样），你将不得不在主容器中重复制作一个1x400的图像。只需在好的x位置添加此图像，1像素看起来就像您使用的边框颜色。并重复一遍！

使用这种技术，您的盒子将不会具有相同的高度（实际上），但显示器看起来就像盒子一样，因为较高的盒子将推动容器并且背景将会出现。

CSS的等高元素

3 个答案: