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

我有一个容器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

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

解决方法

相关文章