我阅读了几种不同的解决方案来模拟等高的列或元素,但它们都没有真正引起我的注意,因为它们使用了 hack、极其复杂的 HTML 布局或不受广泛支持的属性。
这是Fiddle的示例。
我的目标是确保所有元素具有相同的高度,或者至少是行中兄弟姐妹的最大高度。
一行由 3 个元素组成(在这种情况下,不存在行包装器,但我可以考虑添加这样的容器元素)。
有没有解决方案:
- 不需要 JS
- 不使用
display: table
- 不使用负值的宽填充/边距
- 不需要 div 和 float 的指数使用
我阅读了几种不同的解决方案来模拟等高的列或元素,但它们都没有真正引起我的注意,因为它们使用了 hack、极其复杂的 HTML 布局或不受广泛支持的属性。
这是Fiddle的示例。
我的目标是确保所有元素具有相同的高度,或者至少是行中兄弟姐妹的最大高度。
一行由 3 个元素组成(在这种情况下,不存在行包装器,但我可以考虑添加这样的容器元素)。
有没有解决方案:
display: table
有了你所做的限制:不,没有。
编辑:因为您没有提到这一点:您可以为此使用表格。(欢迎回到 90 年代)
您可以为此使用 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>
如果你有一个固定宽度的布局,你可以通过背景图像来伪造它。想象一个模拟边框的平铺图像背景,您只需在主容器中重复-y。
例如,如果您有一个 400px 的容器和 3 100px 的浮动框(就像您的小提琴一样),您将不得不在主容器中重复制作一个 1x400 的图像。只需在良好的 x 位置添加此图像 1 像素看起来就像您使用的边框颜色。并重复它!
使用这种技术,您的盒子将不会具有相同的高度(实际上),但显示看起来会像盒子一样,因为较高的盒子会推动容器并出现背景。