13

この記事の指示に従って、複数列のリストを作成しています。

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

一言で言えば、この行に沿って何かをするように言います:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

それは素晴らしく機能しますが、overflow:hidden の CSS 宣言には頭が下がりました。

それがなければ、私の外側の div は次のように折りたたまれます:

http://jsfiddle.net/alininja/KQ9Nm/1/

含まれている場合、外側の div は、私が望むとおりに動作します。

http://jsfiddle.net/alininja/KQ9Nm/2/

なぜoverflow: hiddenがこの動作を引き起こしているのか疑問に思っています。外側の div を強制的に必要な高さに拡張するのではなく、内側の li アイテムをカットオフすることが期待されます。

ご覧いただきありがとうございます。

4

3 に答える 3

11

オーバーフローが非表示、スクロール、または自動に設定されていない限り、フローティングの可能性がある内部はすべてクリップされません。メソッドの本当の魔法は、要素に設定された高さを与えずに、オーバーフローを非表示に設定すると、内部要素の高さを引き継ぐことです。

ここでは、img がフローティングしているため、div は img をラップしません。

<div><img style="float:left;height:100px" /></div>

ここで、div は適切なオーバーフローを持つ img の高さを実現します。

<div style="overflow:hidden"><img style="float:left;height:100px" /></div>

設定された高さを与えてからオーバーフローを非表示に設定すると、そうでなければ外側にオーバーフローするものはすべて切り刻まれます。

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>

多くの場合、これらの手法を使用してclear:both型の余分なマークアップを回避できることに注意してください。

于 2012-10-19T22:36:27.873 に答える
6

はoverflow: hidden;、フロートされたlis を格納するために存在します。overflow: hidden;新しいブロック フォーマット コンテキストを作成します。これは、独自のブロック フォーマット コンテキストを持つ要素が行うことです。フロートが含まれています。

ここで、これをもう少し説明する StackOverflow の別の回答を指摘します: CSS 境界線を追加すると、HTML5 Web ページでの位置が変更されます。

于 2012-10-19T22:38:10.157 に答える
0

overflow:hidden を使用すると、コンテンツは UL の次元を駆動/プッシュしません。UL 寸法は、コンテンツがその中に収まるかどうかをオーバーライドして無視します。

オーバーフローなし: 非表示のコンテンツとその動作は、UL の全体的な次元を左右する場合とそうでない場合があります。これは主に、UL がその内容によって境界が設定/影響されるコンテナーのようなものであるためです。オーバーフローを非表示にすると、UL はコンテナーとしてではなく、ディメンションをオーバーライドするビューポートとして機能します。

于 2012-10-19T22:38:30.937 に答える