如何使两个浮动div具有相同的高度 [英] How to have 2 floating divs have the same height
本文介绍了如何使两个浮动div具有相同的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个包含内部包装器的包装器,并且该内部包装器包含2个浮动div.左边的内容比右边的内容多,因此它的高度大于右边的内容.我要寻找的是两个容器的高度都相同.
I have a wrapper containing an inner wrapper, and that inner wrapper contains 2 floating divs. The left one contains more content than the right one, so it's height is greater than the one on the right. What I am looking for is that both of the containers would have the same height.
我的html:
<div id="wrapper">
<div id="sub-menu">
<div id="left-column" class="column">
Agenda</br>
Here I put some texte
</div>
<div id="right-column" class="column">
sdfdsf
</div>
</div>
</div>
我的CSS:
body{
background-color:#E5E5E5;}
#wrapper{
background-color:#FFFFFF;
width:800px;
margin-left:auto;
margin-right:auto;
overflow:auto;}
#sub-menu{
margin:10px;
width:780px;
position:relative;
float:left;}
.column{
float:left;
height:100%;}
#left-column{
width:500px;
background-color:yellow;}
#right-column{
width:280px;
background-color:magenta;}
推荐答案
除非您可以保证每列的高度(使用这种流动性介质通常无法保证),否则不能单独通过CSS使用浮动元素来完成此操作作为网络).但是,您确实可以选择:
You cannot do this via CSS alone using floated elements, unless you can guarantee the height of each column (which you generally can't, with such a fluid medium as the web). However, you do have options:
- 使用
display: table-cell
: http://jsfiddle.net/8LdQk/3/.不幸的是,这在IE6或7中将不起作用.此博客文章详细说明其用法可能会有所帮助. - 使用JavaScript: http://jsfiddle.net/8LdQk/5/. >
- 使用Dan Cederholm的经典人造列技巧.
- Using
display: table-cell
: http://jsfiddle.net/8LdQk/3/. Unfortunately, this will not work in IE6 or 7. This blog post detailing its use might be helpful. - Using JavaScript: http://jsfiddle.net/8LdQk/5/.
- Using Dan Cederholm's classic faux-columns trick.
这篇关于如何使两个浮动div具有相同的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文