我目前使用a解决了一个小问题table
,见下文。基本上,我想要两个div占用可用宽度的100%,但只占用尽可能多的垂直空间(这在图片中并不那么明显)。如图所示,两者应始终具有完全相同的高度,并在它们之间留有一条细线。
旧文本http://pici.se/pictures/qJRMtoLPv.png
这很容易做到table
,我现在正在使用。不过,我并不太热衷于解决方案,因为从语义上讲,这实际上并不是桌面。
发布于 2018-03-05 14:30:58
你可以在CSS中获得等高的列,方法是应用大量的底部填充,相同数量的底部负边距,并在列周围加上一个隐藏溢出的div。
#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>
我已经在所有的现代浏览器FF3+Opera 9+ChromeSafari 3+和IE6/7/8中测试了这一点。它的工作很好。
发布于 2018-03-05 15:37:27
display:table-row
和display:table-cell
可以在所有现代浏览器中工作:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
https://stackoverflow.com/questions/-100007515
复制相似问题