css - 两列等高只有 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%; }

列可以是您实际需要的任何宽度。无论如何， super 简单且跨浏览器友好。