CSS 2列布局：列高度 [英] CSS 2 Column layout: Column height

问题描述

我正在使用 div 的

$ b建立一个简单的2列布局是我不能得到 right 列与 left 相同的高度。

 < div id =container> 
 
< div id =leftstyle =float：left; width：200px; background：#DDFFDD;> 
< p> 1< / p> 
< p> 2< / p> 
< p> 3< / p> 
< p> 4< / p> 
< / div> 
 
< div id =rightstyle =float：left; width：600px; background：#DDDDFF> 
< p>主< / p> 
< / div> 
< / div> 
  

正如你可以看到，右边的列不匹配左边的高度。

：我们不知道高度，因为列中的内容是动态的。并且 left 或 main 中的内容可以是最大高度。

解决方案

http：/ /matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这个网站有一个很好的解释，我'd find hard to equal or top。

祝你好运！

I'm working on building a simple 2 column layout in html using div's

The problem is that I can't get the right column to have the same height as left.

<div id="container">

    <div id="left" style="float: left; width: 200px; background: #DDFFDD;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

    <div id="right" style="float: left; width: 600px; background: #DDDDFF">
        <p>main</p>
    </div>
</div>

As you can see the right column does not match the height of the left one. I'd like them to be equal

Edit: We will not know the height because the content inside the columns will be dynamic. And the content in either left or main could be the maximum height.

解决方案

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

this website has a very good explanation which I'd find hard to equal or top.

Good luck!

这篇关于CSS 2列布局：列高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！