Q&A
再現できるHTML/CSSを質問文に追記いただけませんか？
column-countをつかい段組みレイアウトにしたいのですが、
指定した段数よりも少なく表示されるときがあります。
理由をご存知の方がいましたら、ぜひご教示いただきたいです。
実現したいこと
HTML, CSSを用いて4列のレイアウトを作りたいです。
column-countをつかいましたが、liの数によっては3列になってしまいます。
css
1ul { 2 column-count: 4; 3} 4 5li a { 6 width: 254px; 7}
width: 254px;は、試しに少なめに入れた数字です。
ulの幅は1040pxなので260pxでも収まる想定となっています。
ulにfont-size:0を指定して隙間を無くすなども試しました。
4列入るスペースはあり、カラム落ちなどではないかと思います…。
検索をかけましたが、「段数が少なくなることもある」と記載されている書籍がありましたが、理由が載っておらず解決方法がはっきりしません。
ただし、実際の段数は、レイアウトに応じて指定した段数より少なくなることもあります。
flexとは性質が「違う」事を理解して、適材適所で使用するしかないですね。
回答2件
0
これは、左上から順に、縦に要素が入るからですね。
column-countが4でliが9個の場合、段の高さがli2つ分では足りないので、li3つ分になります。
その状態で左上から順に縦にliを入れていくと、結果的に一番右のカラムが使われなくなるというわけです。
まあ、3個-2個-2個-2個と入ってほしい感じもしますが、
要素1 | 要素4 | 要素6 | 要素8
要素2 | 要素5 | 要素7 | 要素9
要素3 |
というのもそれはそれでおかしいですよね。
投稿2019/02/12 12:21
編集2019/02/12 12:29
総合スコア112
「横並べ」と勘違いしている人も多そうですよね。最初は私も「flex要らないじゃん！」と勘違いした1人です。
(^^;)
0
ベストアンサー
column-countに指定した数は最大値の扱いで、その範囲で各段のコンテンツの高さがほぼ同じになるようにブラウザーは自動的に段の高さの最大値を設定するようです。
結果、9項目のリストのような場合3x3になることもあります。
もしコンテンツが少なくても4段で表示させたい場合はheightやmax-heightを指定すれば後の方のコンテンツを右へ流すことができるはずですのでお試しください。
投稿2019/02/12 12:27
編集2019/02/12 12:41
総合スコア1907
height指定で右へ流すのはムリだと思いますよ
「li要素3つ分の高さ」はどうしても確保する必要がありますが、そうしたら3×3になりますので
min-ではなくmax-heightでした。訂正しました。
確かに、9つの場合は2x4+1となってしまうので、そうすると最後の1つがはみ出てしまいますね。
はみ出た分は隠していいのならoverflow:hidden;で8つだけ表示というのはできますが。
「テキストのみ」であれば、高さの調整で4段は可能でしょうが、ブロック要素は、1つを分割して、他のブロック要素に…って訳には行かないので、その違いでしょうね。
あなたの回答
tips
プレビュー
