两列相等高度仅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

具有等高柱的可变高度包装纸

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

使用 div 制作一个包装，如下所示：

\n\n

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

\n\n

应用这样的样式：

\n\n

.wrapper {\n    height: 400px;\n}\n\n.wrapper .box{\n    float: left;\n    height: 100%;\n    width: 200px;\n    background-color: red;\n    margin-right: 10px;\n}\xe2\x80\x8b\n

\n\n

没有尝试，但会起作用。

\n\n

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

\n