css - 两列仅等高css（不显示：表格，表格行，表格单元格）

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

具有等高列的可变高度包装器

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's/manonatelier 的更好（每个 +1），但如果你真的想要一个完全独立于内部内容量的解决方案，我会使用旧的设计“钩子”技术：http: //jsfiddle.net /GTY8P/

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

Answer 4

Make a wrapper with a div like this :

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

Apply a style like that :

.wrapper {
    height: 400px;
}

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

Didn't try, but will work.

EDIT 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/