我有点坚持......我试图让#right
与#left
的高度相同,但#right
是流动的。我该怎么做呢?
#container {
width: 960px;
margin: 0 auto;
}
#left {
background: #ccc;
float: left;
padding: 10px;
width: 160px;
}
#right {
background: #ccc;
float: right;
padding: 10px;
width: 750px;
}
-
<div id="container">
<div id="left">
test
</div>
<div id="right">
test
</div>
</div>
感谢。
答案 0 :(得分:1)
您可以通过应用模拟100%高度#left
的背景图片来实现此目的:
<强> HTML 强>
<div id="container">
<div id="left">
test
</div>
<div id="right">
test<br />test
</div>
</div>
<强> CSS 强>
#container {
width: 960px;
margin: 0 auto;
background: url(http://www.dummyimage.com/180x1/ccc/ccc.png) repeat-y;
overflow:hidden;
}
#left {
background: #ccc;
float: left;
padding: 10px;
width: 160px;
height: 100%;
}
#right {
background: #ccc;
float: right;
padding: 10px;
width: 750px;
height; 100%;
}
现场演示:http://jsfiddle.net/TqKMW/
有关此技巧的更多信息:http://www.alistapart.com/articles/fauxcolumns/
答案 1 :(得分:0)
只需将padding-bottom:10000px;margin-bottom:-10000px;
添加到每个列,然后overflow:hidden;
添加到包装器(example):
<div id="container">
<div id="left">
test<br>test
</div>
<div id="right">
test
</div>
</div>
#container {
width: 960px;
margin: 0 auto;
overflow:hidden;
}
#left {
background: #ccc;
float: left;
padding: 10px;
width: 160px;
padding-bottom:10000px; /* Taller than tallest possible column */
margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}
#right {
background: #ccc;
float: right;
padding: 10px;
width: 750px;
padding-bottom:10000px; /* Same as #left{padding-bottom} */
margin-bottom:-10000px; /* Negative version of #left{padding-bottom} */
}
注意:这可能无法在某些旧版浏览器中使用,因此请务必检查以确保其在您需要支持的浏览器中有效。