css - 列のバランスをとる

Question

一部のコンテンツを3列に設定していますが、Chromeで列から列に折り返されるため、次の列の上部に余白が追加されます。これは、ある意味では意味がありますが、非常に見栄えが悪くなります。

これが私が話していることの例です：http：//www.sanguinediabetes.com/wp/concept/

一部の列の上部に醜いギャップがなく、列の中央で終わる段落の間にスペースができるように、これをどのようにスタイル設定できますか？

Answer 1

あなたが見ているのは、間違いなく、複数列の要素の正しい動作です。各段落に設定した下マージンは、それらの段落の直前に列区切りがある場合でも、後続の段落を押し下げます。ええ、それは間違いなく奇妙です、しかしねえ、ちょっと、今修正する必要があるこのレイアウトモデルにはさらに大きな問題があります。

問題に対処する1つの方法は、すべての段落の余白を削除し、特定の選択した段落の後に強制的に列を分割することです。昨年から改訂された仕様のドラフトは、宣言を規定していますcolumn-break。しかし、これまでのところサポートは文字通りゼロであり、このトピックに関するMDNの記事は存在せず、chromeはそれをサポートするふりをしていません。基本的に、あなたはかなり新しい領域にいて、ツールはまだそこにありません。

私がここにいる間、あなたのレイアウトには他にも差し迫った問題があります。最も基本的なものを表示するには、ビューポートのサイズを500ピクセル程度に狭めてみてください。あなたの列は痛々しいほど薄くなり、読めなくなります。実際には、個々の単語のスタックにすぎません。あなたのテキストが「携帯電話はインターフェースデザインの主要な概念を普及させるのに役立った。単純なタスク、あるいは複雑なタスクを達成するために複雑な手順や隠されたオプションをいじくり回すのはユーザーの義務ではない。それはすべての操作が単純で、明白で、高速であるように設計されるソフトウェアの義務。」？これはちょっと面白いです。これを携帯電話で見てみましたか？内容を考えればオススメです。

Column-count素晴らしいですが、実際のブラウザの互換性を探している場合は、今のところ古き良きフロート列を使用する方がはるかに優れています。おそらく、1つの真のレイアウトのバリエーションを試してみてください。