我有一个具有特定宽度的box1容器(其内容可能会有所变化)。该框包含box2，其宽度固定(可以是图标)。在box2旁边，我有一些文字的box3。我希望文本使用box2右侧的所有可用空间。粘贴以下HTML，您将获得:
到现在为止还挺好。如果文本变长，它不会环绕box2(这就是我想要的)，但是，它不会使box1增长，这是我的问题。您会告诉我“嘿，如果您将box3设置为position: absolute，您如何期望它使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，然后将overflow:hidden与float结合起来-框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>
惊讶
overflow:hidden可以做的所有事情:D