css - これらのCSS3列幅要素がコンテナに余分な空白を追加するのはなぜですか？

Question

この奇妙な振る舞いを示すこの例を作成しました。CSSルールのプレフィックス付きバージョンを使用し、Chrome 19forMacに対してのみテストしました。

Answer 1

列の余分なスペースは、指定したスタイルの一部からのものです（例width:100000px;）。修正するには、次のCSS（例）を使用します。

#container {
 height: 250px;
 -webkit-columns: 15em;
 -moz-columns: 15em;
 -ms-columns: 15em;
 -o-columns: 15em;
 columns: 15em;
}
#container article {
 vertical-align: top;
 display: inline;
}
#container article img {
 display: block;
 margin: 0 auto;
 max-width: 100%;
 max-height: 100%;
}