如何获得正确的浮动DIV以填充其可用空间？
alt text http://tanguay.info/web/external/cssRightSide.png
<html>
<head>
<style type="text/css">
.content{
background-color: #fff;
margin: 0px auto;
width: 760px;
border: 1px solid blue;
font-size: 10pt;
}
.content .leftSide {
background-color: yellow;
float: left;
padding: 5px;
}
.content .rightSide {
background-color: orange;
float: left;
width: *;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div class="leftSide"><img src="test.jpg"/></div>
<div class="rightSide">Right side text should be centered.</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="leftSide"><img src="test2.jpg"/></div>
<div class="rightSide">And the background should fill the DIV of course.</div>
<div style="clear:both"></div>
</div>
</body>
</html>
感谢Guffa和Rich,浮动:左侧偏离允许文本居中,但为了使背景颜色向下延伸,我还必须制作父DIV的背景颜色.
但是,我仍然无法让文本在垂直中间对齐,因为DIV实际上并没有完全向下,是否还有"自动"？例如身高:*,或浮动:自动？正如下面提到的Cletus,这在HTML表格中都是微不足道的,CSS设计者肯定包含了一些"使垂直空间向下填充"的属性.
alt text http://tanguay.info/web/external/cssRightFixed.png
<html>
<head>
<style type="text/css">
.content{
background-color: orange;
margin: 0px auto;
width: 760px;
border: 1px solid blue;
font-size: 10pt;
}
.content .leftSide {
background-color: yellow;
float: left;
padding: 5px;
}
.content .rightSide {
background-color: orange;
padding: 5px;
text-align: center;
vertical-align: middle; /* DOESN'T WORK SINCE THE DIV DOES NOT ACTUALLY GO ALL THE WAY DOWN */
}
</style>
</head>
<body>
<div class="content">
<div class="leftSide"><img src="test.jpg"/></div>
<div class="rightSide">Right side text should be centered.</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="leftSide"><img src="test2.jpg"/></div>
<div class="rightSide">And the background should fill the DIV of course.</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="leftSide"><img src="test3.jpg"/></div>
<div class="rightSide">And the background should fill the DIV of course.</div>
<div style="clear:both"></div>
</div>
<div class="content">
<div class="leftSide">this is a text on the left with no image</div>
<div class="rightSide">And the background should fill the DIV of course.</div>
<div style="clear:both"></div>
</div>
</body>
</html>
cle*_*tus 17
如果你使用浮动,你几乎需要给它们宽度.如果您指定宽度,则浮动很好,或者您对浏览器计算的最小所需宽度感到满意.一旦你需要它们扩展以填补可用空间,你就不幸了.
实际上你使用的是错误的工具.
所以你有两种可能性:
使用表格这是一个需要解决的小问题(等待反表纯CSS狂热分子疯狂).
编辑:好的,你也想做垂直居中.现在你真的遇到了麻烦.请参阅是否可以在不使用表的情况下执行此HTML布局 对于简单的布局可以使用纯CSS有多么难,特别是当您想要进行垂直居中(当容器或子容器不是固定高度时)或并排内容时.
再次,表格使这个微不足道vertical-align: middle.
如果您想了解有关使用纯CSS进行垂直居中的更多信息,请参阅: