Den*_*gan 104 html css html-table
我目前用a解决了一个小问题table,见下文.基本上,我希望有两个div占用可用宽度的100%,但只占用所需的垂直空间(图中并不是那么明显).如图所示,两者应始终具有完全相同的高度,并且它们之间有一条小线.
alt text http://pici.se/pictures/qJRMtoLPv.png
这一切都很容易使用table,我现在正在做.但是,我不太热衷于解决方案,因为在语义上这实际上不是一个表.
Nat*_*wne 155
您可以通过应用大量的底部填充,相同数量的底部负边距以及使用隐藏溢出的div围绕列来获得CSS中的相等高度列.垂直居中文本有点棘手,但这应该可以帮助你.
#container {
overflow: hidden;
width: 100%;
}
#left-col {
float: left;
width: 50%;
background-color: orange;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
border-left: 1px solid black;
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>我认为值得一提 streetpc的上一个答案有无效的html,doctype是XHTML,属性周围有单引号.另外值得注意的是你不需要一个额外的元素,clear以清除容器的内部浮动.如果你使用溢出隐藏,这将清除所有非IE浏览器中的浮动,然后只是添加一些东西给hasLayout,如宽度或缩放:1将导致IE清除其内部浮动.
我已经在所有现代浏览器FF3 + Opera9 + Chrome Safari 3+和IE6/7/8中对此进行了测试.它可能看起来像一个丑陋的技巧,但它运作良好,我在生产中使用它很多.
我希望这有帮助.
Dmi*_*kov 97
它是2012年+ n,所以如果您不再关心IE6/7 display:table,display:table-row并且display:table-cell在所有现代浏览器中工作:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
更新2016-06-17:如果您认为时机已到display:flex,请查看Flexbox Froggy.
Luc*_*eeb 19
您应该使用flexbox来实现此目的.它在IE8和IE9中不受支持,并且只在IE10中使用-ms前缀,但所有其他浏览器都支持它.对于供应商前缀,您还应该使用autoprefixer.
.parent {
display: flex;
flex-wrap: wrap; // allow wrapping items
}
.child {
flex-grow: 1;
flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
小智 10
你可以使用js:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
这是CSS中的经典问题.对此没有真正的解决方案.
A List Apart的这篇文章很好地解读了这个问题.它使用一种称为"人造柱"的技术,基于在元素上有一个垂直平铺的背景图像,其中包含创建等长列幻觉的列.因为它在浮动元素的包装上,所以它与最长的元素一样长.
A List Apart编辑在这篇文章中有这样的说明:
编者的一份说明:尽管时间很好,但本文可能并不反映现代最佳实践.
该技术需要完全静态宽度设计,这种设计不适用于当今流行的跨设备站点的液体布局和响应式设计技术.但是,对于静态宽度站点,它是一个可靠的选择.