html css 2列布局，两列自动相同高度? [英] html css 2 column layout, both columns same height automatically?

问题描述

我设置了两列布局，我想让两列自动拉伸以填充两列的父 div，原因是左列有背景和边框，我希望它占据页面的整个边，这样它就不会显得凌乱等.我使用 inline-block 来对齐两列，而不是浮动或任何东西(我不能使用溢出:隐藏，因为它弄乱了我的一些可能会从 div 中消失的功能，例如:下拉菜单)所以我需要找到一个简单的方法来做到这一点，使用这个方法.

jsfiddle:

http://jsfiddle.net/sFBGX/

解决方案

你可以使用 CSS 表格布局(不是 HTML 表格布局，那会是糟糕的语义):

.container {显示:表；表格布局:固定；宽度:944px；字体大小:0.75em；}.col{显示:表格单元格；垂直对齐:顶部；}.container .left{宽度:236px；背景颜色:灰色；}.container .right{宽度:708px；背景颜色:黄色；}

<div class="col left">Left</div><div class="col right">右</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>嘿

兼容性为 IE8+，如果需要，IE6/7 的回退与 inline-block

完全相同

之前答案中的详细解释:这里和那里还有假列的老方法(你的设计必须考虑到这种技术)

I have a two column layout set up, and I want to have both columns automatically stretch to fill parent div of the two columns, The reason being that the left column has a background and border to it, and i want it to take up the entire side of the page so it won't look messy and such. I use inline-block to align the two columns, not float or anything (I can't use overflow:hidden because it messes up some of my features that may go out of the div, ex: dropdown menus) So I need to find a simple way to do this, using this method.

jsfiddle:

http://jsfiddle.net/sFBGX/

解决方案

You can use CSS table layout (not HTML table layout, that would be poor semantics):

.container {
    display: table;
    table-layout: fixed;
    width: 944px;
    font-size: 0.75em;

}
.col {
    display: table-cell;
    vertical-align: top;
}

.container .left
{
    width: 236px;
    background-color:grey;
}
.container .right
{
    width: 708px;
    background-color:yellow;
}

<div class="container">
    <div class="col left">Left</div>
    <div class="col right">Right
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Hey
      
    </div>
</div>

Compatibility is IE8+ and fallback for IE6/7 if needed is exactly the same as for inline-block

Longer explanations in previous answers: here and there with also the good old method of faux-columns (your design must be thought with this technique in mind)

这篇关于html css 2列布局，两列自动相同高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！