1

短いバージョン：左側のフロートの右側にあるaが、左側のフロートの周りにテキストを折り返さないoverflow:autoのはなぜですか？（ボーナス：これは列効果を達成するための許容できる方法ですか？）divdivdiv

ロングバージョン...

div並べて表示したい2つのがあります。div左側には特定の幅と高さがあります。そして、div左側はdiv右側よりも短くなっています。ただし、右側のテキストがdiv左側のdivの下に折り返されることは望ましくありません。

これが私の最初の試みでした...

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div>
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

...右側のテキストがdiv左側に折り返されることはわかっていましたdiv。そして、それはしました。

次に、作成したページに列効果があることを思い出しました。どこにあるのかわからないので、コピーして貼り付けました。右側に割り当てるだけでしたoverflow:auto。divこんな感じ…

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div style="overflow:auto">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

出来上がり、右divのテキストは最初の（左）の下にラップされなくなりましたdiv！2番目（右）divは列として表示されました。

それで、私は見つけることができるすべてを読みました、overflow:autoそして、なぜ私がこの振る舞いを見るべきであるかについての言及を見つけませんでした。誰かが私にそれを説明できますか？

また、これは列効果を達成するための許容可能な方法ですか？

4

4 に答える 4

1

float:left最初のdivから削除します。

<div>
    <div style="border:1px solid grey; width:100px; height:100px;">
        Div on the left.
    </div>
    <div style="overflow:auto;  ">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>​

デモ

于 2012-12-11T07:59:30.557 に答える
1

あなたはこれを試すことができます

<div style="width:800px; background-color:#CCC">
    <div style="width:300px; height:100px; float:left; background-color:#CCC">
        Div on the left.
    </div>
    <div style="height:100px; float:left; width:500px; background-color:#999">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>
于 2012-12-11T08:00:20.573 に答える
1

divを隣り合わせにするには、両方ともフロートが必要で、周囲のdivに収まります。

例：

<div style="width:200px;">
  <div style="width:100px; float:left;">
      content
  </div>
  <div style="width:100px; float:left;">
      content
  </div>
</div>

輪郭を描くdivをdivの最大のdivの場所で拡大したいoverflow:hidden;場合。そのdivに高さがない場合は、大きいdivに合わせて拡大縮小します。

プレビュー： http： //jsfiddle.net/WzVBE/

于 2012-12-11T07:56:11.030 に答える
1

overflow: auto（またはvisible）以外の場合は、2番目divに新しいブロックフォーマットコンテキストが作成されます。これは、その中のテキストが、最初の左フローティング（両方のブロックを含む）divと同じものを共有するのではなく、独自のフォーマットコンテキストにあることを意味します。したがって、最初のテキストの周りを流れることはできなくなります。。div divdiv

フロートも独自のBFCを生成しますが、それは目前の問題とは正確には関係ありません。ただし、他の回答に示されているように、リフローを防ぎ、カラム効果を実現します。

これは、列効果を作成するための許容可能な方法ですか？わかりませんが、型にはまらないようです。div上記の理由で、代わりに2番目をフロートすることもできます（ただし、フレックスボックスやグリッドなどの今後の真のレイアウトモードを支持して、最近はブラウザーの互換性ハックと見なされていますが、これは私たちが得た最高のものです当面）。

インラインコンテンツは、フロートされたコンテンツの周りを自然に流れることができるように設計されていることに注意してください。CSS2.1、§9.5Floatsを参照してください。

また、目的はoverflow、サイズが制限されたボックス内のコンテンツのオーバーフローを制御することであることも忘れないでください。ボックスが新しいBFCを作成し、結果としてフロートに影響を与えることは、単なる副作用であり、その理由はここで説明されています。長い読み物ですが、リフローの防止について少し説明しています。参照しやすいように、ここで引用します。

そのため、この変更はCSS2.1で行われ、ここに記載されています。overflow2番目のボックスだけに以外の値を適用するvisibleと、ブラウザはボックス全体を押しのけてフロートに道を譲ります。これは、ボックスがフローするのではなく、コンテンツを囲む新しいブロックフォーマットコンテキストを作成するためです。フロート。overflow: autoたとえば、次のようになります。

クリアランスがないことに注意してください。2番目のボックスが独自のBFCを確立したかどうかに関係なく、2番目のボックスが横にではなくclear: left押し下げclear: bothられた場合。

ちなみに、はい、これは、div常に最初のをクリアしたい場合は、クリアがそこにある必要があることを意味しますdiv。

于 2012-12-11T08:24:45.293 に答える