我有一个容器Box1有一定的宽度(可能会根据其内容而变化)。该框包含Box2，它有一个固定的宽度(它可以是一个图标)。在Box2旁边，我有一个Box3和一些文本。我想让文本使用Box2右侧的所有可用空间。下面粘贴了HTML，您可以：
到现在为止还挺好。如果文本变长，它不包围Box2(这是我想要的)，但是，它不会使Box1增长，这是我的问题。你会告诉我“嘿，如果你把Box3的位置：绝对的，你怎么期望它使Box1成长？嗯，我不是，但是，我怎么能得到Box3显示在Box2旁边，使用所有水平空间可用，并使Box1成长如果必要？ (我需要说我想在IE6以上的工作，并避免使用表吗？)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#Box1 { position: relative }
#Box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }
/* Styling */
#Box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#Box2 { background: #999; padding: .5em; }
#Box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="Box1">
<span id="Box2">2</span>
<span id="Box3">3</span>
</div>
</body>
</html>
解决方法
您需要将框3作为块级元素，因此使用display：block然后在溢出中折腾：与浮动框结合隐藏2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#Box1 { }
#Box2 { float:left; }
#Box3 { display:block;overflow:hidden; }
/* Styling */
#Box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#Box2 { background: #999; padding: .5em; }
#Box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
<title>How to do a `float: left` with no wrapping?</title>
</head>
<body>
<div id="Box1">
<span id="Box2">2</span>
<span id="Box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
</div>
</body>
</html>
惊人的所有的东西溢出：隐藏可以做：D
