HTML/CSS：制作两个高度相同的浮动div
HTML/CSS：制作两个高度相同的浮动div
提问于 2018-03-05 06:12:14
我目前使用a解决了一个小问题table，见下文。基本上，我想要两个div占用可用宽度的100％，但只占用尽可能多的垂直空间（这在图片中并不那么明显）。如图所示，两者应始终具有完全相同的高度，并在它们之间留有一条细线。
旧文本http://pici.se/pictures/qJRMtoLPv.png
这很容易做到table，我现在正在使用。不过，我并不太热衷于解决方案，因为从语义上讲，这实际上并不是桌面。
回答 2
Stack Overflow用户
发布于 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中测试了这一点。它的工作很好。
Stack Overflow用户
发布于 2018-03-05 15:37:27
display:table-row和display:table-cell可以在所有现代浏览器中工作：
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007515
复制相关文章
相似问题