如何做一个`float：left`没有包装？ [英] How to do a `float: left` with no wrapping?
问题描述
我有一个容器 box1 有一定的宽度（可能会根据其内容而改变）。该框包含具有固定宽度（可以是图标）的 box2 。在 box2 旁边，我有一些文本的 box3 。我想让文本使用 box2 右侧的所有空间。使用下面的HTML粘贴，您将获得：
I have a container box1 that has a certain width (which might change depending on its content). That box contains box2 which has a fixed width (it could be an icon). Next to box2, I have box3 with some text. I want the text to use all the space available to the right of box2. With the HTML pasted below, you get:
到目前为止很好。如果文本变得更长，它不包裹 box2 （这是我想要的），但是，它不会使 box1 grow，这是我的问题。你会告诉我嘿，如果你让 box3 一个位置：绝对，你怎么期望它 box1 grow？。嗯，我不是，但是我怎么能得到 box3 显示在 box2 旁边，使用所有水平空间可用，并使 box1 增加如果必要？ （我需要说我想在IE6以后的工作，并避免使用表吗？）
So far so good. If the text gets longer, it doesn't wrap around box2 (which is what I want), however, it doesn't make box1 grow, which is my problem. You'll tell me "hey, if you made box3 a position: absolute, how could you expect it to make box1 grow?". Well, I don't but then, how can I get box3 to show next to box2, use all the horizontal space available, and make box1 grow if necessary? (Do I need to say that I'd like this work on IE6 onward, and to avoid using a table?)
<!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>
推荐答案
因此使用 display：block 然后在 overflow：hidden 中结合 float -ing box 2：
You need box 3 to be a block level element, so use display:block and then toss in an overflow:hidden in conjunction with float-ing box 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 do：D
Amazing all the things overflow:hidden can do :D
这篇关于如何做一个`float：left`没有包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
