Question

我读到关于模拟等高列或元素的几种不同解决方案, 但没有一种真正吸引我的注意, 因为他们使用黑客、超复杂的 HTML 布局或者没有得到广泛支持的属性。

这里的例子Fiddle 。

我的目标是确保所有元素的高度相同,或至少是同排兄弟姐妹的最大高度相同。

一行由3个要素组成(在这种情况下,没有行包装纸,但我可以考虑添加这种集装箱要素)。

是否有一种解决办法:

doesn t require JS
doesn t use display: table
doesn t use wide padding/margin with negative values
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>

选中此项 < a href=> "http://jsfiddle.net/VkPmg/2/" >http://jsfiddle.net/VkPmg/2/

Answer 3

如果您有一个固定宽度布局, 您可以用背景图像来伪造它。想象一个模拟边框的瓷砖图像背景, 您只需要在主容器中重复一次。

例如,如果您有一个400px 容器, 3 100px 盒子浮动( 如您的小提琴), 您就必须在主容器中复制一个 1x400 图像。请在此图像中添加像您使用的边框颜色一样的 X 位置 1 像素。重复!

使用这种技术,您的盒子将不具有相同的高度(在现实中),但显示将看起来像箱子一样,因为更高的盒子将推动容器,背景将出现。

友情链接