使用css重新調整列時的奇怪怪癖

我發佈了一個關於讓列的換行方式利用視口中的最大空間的問題，右側爲here。結合一些答案，我想出了以下jfiddle。我將有可變數量的列（2-5）和每列中可變數量的單詞。如果水平調整jfiddle窗口的大小，則會注意到中間列使用視口的三分之一，即使幾乎沒有任何單詞在內，基本上仍會留下空白空間。我不介意使用jquery/js，但我想讓這些列更加巧妙地調整大小。使用css重新調整列時的奇怪怪癖

電流CSS我是

body { 
    padding: 1em; 
    display: table; 

    width: 100%; 
} 
div { 
    display: table-cell; 
     -moz-column-width:7em; 
    -webkit-column-width:7em; 
    column-width:7em; 
} 
span { 
    display: block; 
    width: 5em; 
}

身體是容器，的div代表列，而跨度是在每列中的話。我不惜一切代價避免的唯一事情就是將列放在彼此之下。

來源

2015-03-03 thatandrey

您的專欄以他們的方式行事，因爲他們的大小相同。你有div的單一樣式，所以所有的列都得到相同的樣式規則，並且（在你的小提琴中）平均分配每個水平空間1/3的寬度。

只有列B中有7個條目意味着它沒有到達底部，因此不像其他內容那樣包含在div內部，因此不能使用額外的空間。

它不是真的「即使幾乎沒有任何單詞」的情況，因爲「那裏幾乎沒有任何單詞」 - 沒有足夠的內容可以根據表的高度包裹到空間中細胞。

單元格的高度由所有三列的內容以及它們如何換行確定。因此無論哪列最多的單詞都會包含其內容，直到在頁面上垂直佔據大量空間。這就是整個表格和所有三列的高度。如果其他兩列中的任何一個沒有足夠的內容來包裝，他們將留下空間。

如果雙字的列A的數量，例如，你可以很容易地在這兩個列B和C列，其中有「剩餘空間」爲解釋

來源

2015-03-03 04:58:15

感謝的情況下，它是有道理的，但我可以改變什麼來考慮可變列寬，因爲我非常想擺脫白色空間...... – thatandrey 2015-03-03 05:08:47

您將需要找到最少數量的字，並添加一類「至少「當您渲染到標記中時。然後，您可以運行一些腳本來檢查瀏覽器的寬度，並在只有一列適合時將$（'。least'）的寬度設置爲5em，當適合兩列時將10em的寬度設置爲等等。 – 2015-03-03 06:10:57

您可以通過身體部分達到此效果{padding：1em; display：table; border-collapse：collapse; 寬度：100％; } div { display：table-cell; -moz-column-width：7em; -webkit-column-width：7em; column-width：7em; } span { display：block; white-space：nowrap; text-align：center; } .least { width：10em; } – 2015-03-03 06:11:26

使用css重新調整列時的奇怪怪癖

回答

相關問題