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

In CSS, I can do something like this: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png

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

But I've no idea how to change that to something like: http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png

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

The height is not fixed

高度不固定

Please help me do it! Thank you all in advance!

请帮帮我吧!谢谢大家!

5 个解决方案

#1

I use this, pure css.

我用这个,纯粹的CSS。

The 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>

The 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%; }

The columns can be any width you want actually. Anyway, super simple and cross-browser friendly.

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

#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 */
}

#3

I like broh's/manonatelier's better (+1 to each), but if you really want a solution that is utterly independent of the amount of content inside, I would use the old technique of design 'hooks': http://jsfiddle.net/GTY8P/

我喜欢broh's / manonatelier更好(每个+1),但是如果你真的想要一个完全独立于里面内容量的解决方案,我会使用设计'钩子'的旧技术:http://jsfiddle.net / GTY8P /

...Uses more markup and CSS.

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

#4

Make a wrapper with a div like this :

用这样的div制作一个包装器:

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

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

#5

Check this

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;
}​

See the demo here : http://jsfiddle.net/X3UY9/1/

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