3

css 列のレイアウトがどのように機能するのか理解できません。

私は簡単なhtmlを持っています

  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>

とcss

.block {
  background-color: blue;
  width: 50em;
  height: 10px;
  margin: 2px;
  display: inline-block;
}

.container {
  border: 1px solid black;
  display: inline-block;
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}

これは、要素が下に流れてから 2 番目の列に流れ込むことで、期待どおりに機能します。

の幅の値を.block パーセンテージ幅に変更するとどうなりますか? 私の幅はすべて小さいです。パーセンテージを縮小および拡大すると幅が比例して変化するため、それらは明らかに何かに対して相対的ですが、100％が何に対応するのかわかりません。

パーセンテージ幅は何に対して相対的ですか?

4

3 に答える 3

2

幅は、ブラウザーによって挿入された column 疑似要素に相対的です。

http://www.w3.org/TR/css3-multicol/

従来の CSS ボックス モデルでは、要素のコンテンツは、対応する要素のコンテンツ ボックスに流れます。複数列レイアウトでは、コンテンツ ボックスとコンテンツの間に新しいタイプのコンテナー、つまり列ボックス(略して列) が導入されます。multicol 要素のコンテンツは、その列ボックスに流れます。

（私のものを強調してください。）

したがって、求めているパーセンテージ幅は、暗黙の列ボックスに相対的です。

ブラウザのサポート

コメントで指摘したように、現在、列数などのサポートは貧弱です。CSS の複数列の特定の機能が本当に必要な場合を除いて、古いインライン ブロック アプローチを使用する方が簡単だと思います。今日使用されているすべてのブラウザで動作し、簡単に把握できます。

http://jsfiddle.net/b9chris/nt83M/

.block {
  background-color: blue;
  width: 45%;
  height: 10px;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
}

.container {
  border: 1px solid black;
  width: 200px;
  display: inline-block;
}

<span class=container>
<span class=block></span>
<span class=block></span>
<span class=block></span>
<span class=block></span>
<span class=block></span>
</span>

2 つの重要な注意事項:

古い IE のサポートが適切に機能するには、span のように、デフォルトでインラインのタグを使用する必要があります。div のようにデフォルトでブロックされているタグを使用すると、Chrome などでは見栄えがよくなりますが、IE8 では失敗します。

期待どおりに動作させるには、内側のタグに vertical-align: top を設定する必要があります (そうしないと、すべてが vertical-align: bottom のように動作します)。

于 2013-11-08T22:48:27.903 に答える