CSS 2 div大小自动相同高度

Question

我在CSS中有一个问题：

我该怎么做：

当绿色div具有（自动）500px高度的内容时，红色变得相同。

当红色具有（自动）700px高度的内容时，绿色变得相同。

两者都有任何内容然后我使用自动高度。

所以我怎么能做绿色也有红色和红色相同的宽度但是不同的内容丝毫“高度：自动;”？

Answer 1

首先，阅读this excellent article。然后，看看小提琴：

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​

Answer 2

我会将两个DIVS包装在另一个div中，然后将它们提升到父DIV上，然后调整父级的大小

像这样......然后用CSS格式化它们

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

此处可列出其他一些解决方案 http://www.ejeliot.com/blog/61

Answer 3

理想情况下，你要在两个单元格上设置一个最小高度，或者@Taeeril的答案正确建议使用javascript来平衡高度。

以下是使用表格显示类型http://jsfiddle.net/SebAshton/Pj7gy/

的解决方案

Answer 4

Better solution use both javascript and css.

http://codepen.io/micahgodbolt/pen/FgqLc