3

内部にいくつかのインライン要素を含む div があります。要素の 1 つを左側に配置し、残りを右側に配置します。

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
|            |     | |     ||
|            |     | |     ||
|            +-----+ +-----+|
+---------------------------+

BC と C で使用float:rightしてみましたが、フローから削除され、コンテナーから目立ちます。

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
+------------|     |-|     |+
             |     | |     |
             +-----+ +-----+

物を外側の容器からこぼさずに右側に置くための最良の代替手段は何ですか?

編集:ほとんどの回答は、overflow-auto または clear の使用を示唆しているようです。それらの違いは何ですか？どちらかを選択するにはどうすればよいですか? また、要素をフロートする必要があると誰もが想定しているようです。フロートは右に物を置く唯一の方法ですか?

4

6 に答える 6

3

overflow:auto1 つの簡単な解決策は、これを解決するためにコンテナーに追加することです。これにより、コンテナーが拡張されてフロートが含まれるようになりますが、何らかの理由で誰かがコンテナーに小さな高さを追加で設定すると、スクロールバーが表示されます。

他にも機能する代替手段があり、他の場合にはより優れている可能性があります。問題の概要については、この質問とその2番目の回答を参照してください。

于 2012-07-29T13:21:41.493 に答える
3

要素を浮動させると、親の高さは計算されません。clearfix クラスを使用するか、overflow プロパティを使用してフロートをクリアできます。

親 div の最後に追加することもできますが<div style="clear:both;"></div>、これは上記のソリューションよりもセマンティックではありません。

ただし、何を使用するかは、実際には個人の好みです。

また、グリッド システムを使用してみてください。960またはBootstrapを試すことができます。

于 2012-07-29T13:14:50.947 に答える
2

記録としては、フロートハッピークリアフィックスよりも（少なくとも私の目には）これを行うためのより良い方法があります。を使用しdisplay: inline-blockます。欠点は？IE7はそれをサポートしていません（もちろん）。ただし、以下はIE8以降、およびChrome、Firefox、Operaで機能します。

注：これは複雑であるという認識を払拭するために、デモのCSSを簡略化しました。そうではありません。必要なのdisplay: inline-blockはこれだけです。残りは、OPが質問の描写で説明したものと一致させる試みの一部です。

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>

#container {
    background: #ddd;
    text-align: center;
}
#container > div {
    background: #cff;
    display: inline-block;
    padding: 2%;
    height: 100px;
    width: 25%;
}
#container #a {
    height: 30px;
    margin: 0 10% 0 0;
}

http://jsfiddle.net/AZJzz/4

于 2012-07-29T13:53:40.597 に答える
2

次のようにフローティング要素をクリアする必要があります。

<div style="clear: both;"></div>

私のフィドル

クリアしないと、次のようになります: My Fiddle (フロートがクリアされていません)

于 2012-07-29T13:27:35.237 に答える
1

次の行をその後に配置します。

<div style="clear:both;"></div>

これにより、それらが含まれる div がそれらの周りに収まるように拡張されます。

これはライブデモで、その方法を説明しています。

于 2012-07-29T13:24:04.753 に答える
0

現在、フロートはおそらく望ましい結果を得る唯一の方法です。親コンテナをフロートさせることもできますが、その場合は幅を指定する必要があります。このメソッドは、すぐに「すべてをフロート」レイアウトにすることができますが、機能します。http://jsfiddle.net/mjzNP/

于 2012-07-29T13:41:14.997 に答える