平衡列

Question

我有一些內容設置爲3列，但是當它在Chrome中從一列到另一列換行時，它會在下一列的頂部添加邊距，這在一種方式上有意義，但看起來很糟糕。

下面是一個例子就是我在談論：http://www.sanguinediabetes.com/wp/concept/

我怎樣才能的作風，所以沒有在一些列的頂部一個醜陋的差距，但還是空間段落端之間midcolumn？

Answer 1

你所看到的可以說是多列元素的正確行爲。您在每個段落上設置的底部邊距將會壓低後續段落，即使在這些段落之前有一個分欄符也是如此。是的，這可能是奇怪的，但是，嘿，這個佈局模型還有更大的問題需要現在修復。

解決您的問題的一種方法是刪除所有段落邊距並在某些選定的段落後強制列中斷。來自去年的revised draft of the spec提供了column-break聲明。但是迄今爲止的支持從零開始，MDN article on the topic不存在，並且chrome甚至不假裝支持它。基本上，你處於一個非常新的領域，而且工具還沒有完成。

雖然我在這裏，但您的佈局還有其他緊迫的問題。要查看最基本的視頻，請嘗試縮小約500像素的視口大小。你的專欄變得痛苦細緻，難以理解，實際上只是一堆單詞。考慮到你的文字說「移動電話有助於推廣界面設計的主要概念：用戶不應該通過複雜的程序和隱藏的選項來實現簡單的任務，甚至是複雜的任務。軟件的責任就是設計成每一個操作都簡單，明顯和快速。「這很有趣。你有沒有試過在手機上看這個？我會推薦它，考慮內容。

Column-count是真棒，所有，但如果你正在尋找任何真正的瀏覽器兼容性，你現在好老浮動列更好。也許嘗試一些變化的one true layout。