html - 如何为居中容器中的两列设置相同的高度？

Question

如何在 CSS 中创建等高列？我在互联网上发现的只是一种颜色背景，但我有一个白色背景。每列必须有一个圆角边框，左列可能有很多容器。我如何创建它，使列相等，我的意思是左右？另外，如果右列的高度小于左列的高度，如照片所示，我该怎么做？它必须被拉伸。

Answer 1

您可以使用显示表。不幸的是，与 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>​