如何获得正确的浮动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实际上并没有一直下降，所以我仍然无法让文字在中间垂直对齐，那么还有“auto”吗？例如height：*或float-down：auto？正如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>
解决方法
如果你使用浮标，你几乎需要给它们宽度。如果您指定宽度，或者您随着浏览器计算的最小所需宽度而感到满意，浮动就会很好。一旦你需要他们来扩张来填补可用的空间，你就不幸了。
实际上你使用的是错误的工具。
所以你有两种可能性：
修正浮标的大小;要么
>使用表。
有了表格，这是一个难以解决的问题(等待反表纯CSS狂热者去坚持)。
编辑：好的，你也想做垂直的定心。现在你真的很麻烦请参阅Can you do this HTML layout without using tables?，甚至简单的布局可以用纯CSS，特别是当你想做垂直居中(当容器或孩子不是固定的高度)或并排的内容时，多么困难。
再一次，表格使用vertical-align：middle来表示这些微不足道的事情。
如果您想要更多有关使用纯CSS进行垂直居中的信息，请参阅：
> Vertical Centering in CSS：三级嵌套div …只是为了获得垂直居中;
> How to: vertical centering with CSS;和
> Vertical centering with CSS。
