如何在CSS中创建等高列?我在互联网上搜索时发现的只是一种彩色背景,但是我有一个白色背景。每列必须具有圆角边框,并且左列内部可能有许多容器。我该如何创建它,以使列相等(我的意思是左右)?另外,如右图所示,如果右列的高度小于左列的高度,该怎么办?它必须被拉伸。
最佳答案
您可以使用显示表。不幸的是,IE7不能很好地发挥作用。尽管我鼓励人们放弃对此的支持。我公司刚做。这里还有其他技术,但是我认为从语义上讲这是最优雅的。
http://css-tricks.com/fluid-width-equal-height-columns/
http://jsfiddle.net/7HgwA/1
的CSS
body { padding: 10px; }
#container {
display: table;
width: 600px;
margin: 0 auto;
overflow: auto;
border: 1px solid gray;
border-radius: 20px;
padding: 10px;
}
#container > div { display: table-cell; }
#container div { border: 1px solid gray; border-radius: 20px; padding: 20px; }
#left > div { height: 100px; margin-bottom: 10px; background: white; }
#left { width: 150px; background: lightgray; }
#container #spacer { width: 20px; border: none; padding: 0px; }
的HTML
<div id="container">
<div id="left">
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
<div>Some content</div>
</div>
<div id="spacer"></div>
<div id="right">
<p>Lorem ipsum dolor sit</p>
</div>
</div>