web-dev-qa-db-ja.com

オーバーフロー：hiddenはulタグに対して何をしますか？

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

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：hiddenCSS宣言に頭がおかしくなりました。

それがないと、私の外側のdivは次のように崩壊します：

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

それが含まれている場合、外側のdivは私が望むように正確に動作します：

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

なぜオーバーフローするのか疑問に思っています。hiddenがこの動作をトリガーしています。外側のdivを必要な高さまで拡張するのではなく、内側のliアイテムをカットオフすることを期待します。

見てくれてありがとう！

htmlcsshtml-listsoverflowhidden
12
Zhao Li

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

ここでは、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タイプの余分なマークアップを回避できることに注意してください。

9
TheZ

overflow: hidden;は、フロートされたlisを含むためにあります。 overflow: hidden;は、新しいブロックフォーマットコンテキストを作成します-そしてそれは、独自のブロックフォーマットコンテキストを持つ要素が行うことです-それらはfloatを含みます。

これをもう少し説明するStackOverflowの別の答えをここで指摘します： CSSボーダーを追加するとHTML5 Webページの位置が変わります

4
banzomaikaka

オーバーフロー：非表示の場合、コンテンツはULの寸法を駆動/プッシュしません。 UL寸法は、内容がその中に収まるかどうかを上書きして無視します。

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

0
Bryan Allo