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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ric*_*uen 39

你需要方框3作为一个块级元素,所以使用display:block然后再overflow:hidden与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>

Run Code Online (Sandbox Code Playgroud)

惊人的所有事情overflow:hidden都可以做到:D

归档时间：	14 年，7 月前
查看次数：	25400 次
最近记录：	11 年，11 月前