web-dev-qa-db-ja.com

ラッピングなしで「float：left」を行う方法は？

特定の幅のコンテナ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>
csscss-positioncss-float
29
avernet

ボックス3をブロックレベルの要素にする必要があるため、display:blockを使用し、float- ingボックス2と組み合わせてoverflow:hiddenをトスします。

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

39
Richard JP Le Guen

これを実現する方法はいくつかあります。 2つの一般的なものは、そのようなclear: bothの直後に空の要素を置くことです（デモ用のインラインcssのみ）：

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

もう1つの方法は、overflow: hiddenを次のように使用することです。

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

ただし、これらのソリューションの両方に問題があります。最初のものでは、不要で醜いマークアップを追加します。そして、2つ目では、ボックスの外に何かを配置したい場合（position: absoluteなど）、それは表示されません。

より一般的な最新のソリューションは、::after疑似要素を使用して、次のようにクリアすることです。

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