两列相等高度仅css（无显示：table，table-row，table-cell）

Question

在CSS中，我可以这样做： http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png

但我不知道如何将其更改为： http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png

高度不固定

请帮帮我吧！提前谢谢大家！

Answer 1

我用这个，纯粹的CSS。

html：

<div id="container" class="holder">
    <div id="column-one" class="even-height">TEXT</div>
    <div id="column-two" class="even-height">TEXT</div>
</div>

css：

.holder {
   overflow: hidden;
   clear:    both;
}
.holder .even-height {
   float: left;
   padding-bottom: 100000px;
   margin-bottom:  -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }

列可以是您想要的任何宽度。无论如何，超级简单和跨浏览器友好。

Answer 2

Variable height wrapper with equal-height columns

HTML

<section class="wrapper">
    <section>a</section>
    <aside>b<br>c</aside>
</section>

CSS

/* Set @max-column-height to greater than the maximum height of the tallest column */
.wrapper {
    overflow:hidden;
    margin:10px;
}
.wrapper > section {
    background:red;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}
.wrapper > aside {
    background:orange;
    width:50%;
    float:left;
    padding-bottom:1000px; /* @max-column-height */
    margin-bottom:-1000px; /* @max-column-height */
}

Answer 3

我喜欢broh / manonatelier更好（每个+1），但是如果你真的想要一个完全独立于里面的内容量的解决方案，我会使用旧的设计技巧' hooks'：http://jsfiddle.net/GTY8P/

...使用更多标记和CSS。

Answer 4

使用这样的div创建一个包装器：

<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

应用这样的风格：

.wrapper {
    height: 400px;
}

.wrapper .box{
    float: left;
    height: 100%;
    width: 200px;
    background-color: red;
    margin-right: 10px;
}​

没试过，但会奏效。

编辑 jsFiddle：http://jsfiddle.net/NXjk4/

Answer 5

检查

的 HTML

<div class="box" >
    <div class="box1">TEXT</div>
    <div class="box2">TEXT</div>
</div>​

的 CSS

    .box{
    background:#000;
    height:60px
}

.box1{
    float: left;
    background-color: #fff;
    margin: 10px;
    text-align:center;
}
.box2{
    float: left;
    background-color: red;
    margin: 10px;
    margin-left:5px;
    text-align:center;
}​

请参阅此处的演示： http://jsfiddle.net/X3UY9/1/