Question

我有一个容器box1，它有一定的宽度（可能会根据其内容而改变）。该框包含box2，其宽度固定（可以是图标）。在box2旁边，我有box3一些文字。我希望文本使用box2右侧的所有可用空间。使用下面粘贴的HTML，您将获得：

Short text

到目前为止一切顺利。如果文本变得更长，它不会包裹box2（这就是我想要的），但是，它不会使box1增长，这是我的问题。你会告诉我“嘿，如果你让box3成为position: absolute，你怎么能指望box1成长？”。好吧，我不是，但是，我怎么能在box3旁边显示box2，使用所有可用的水平空间，并在必要时使box1增长？（我是否需要说我喜欢IE6上的这项工作，并避免使用表格？）

Long text

<!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>

Answer 1

您需要将第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

Answer 2

有几种方法可以实现这一目标。两个常见的是要么像clear: both之后一样有一个空元素（仅用于演示的内联css）：

<span class="box1">...</span>
<br style="clear:both"/>

另一种方法是使用overflow: hidden，如下所示：

<span class="box1" style="overflow: hidden">...</span>

然而，这两种解决方案都存在问题。使用第一个添加不必要的丑陋标记。如果您想要将某些东西放在盒子外面（例如position: absolute），那么第二个就会显示出来。

更常见的现代解决方案是使用::after伪元素并清除它，如下所示：

.box1::after {
    content: '';
    display: table;
    clear: both;
}

Answer 3

我建议如下：

#box1
{
    position: relative; /* or some other positioned value */
}

#box2
{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#box3
{
    margin-left: 10px;
}

如果#box2具有固定大小，您只需使用#box3的余量来防止#box2重叠，并且因为它没有定位，#box1将随着#box3的增长而增长。

如何做一个没有包装的`float：left`？

3 个答案: