CSS多列布局保證金問題

我有一個基於CSS的2列布局...CSS多列布局保證金問題

.mainContentSection { 
    font-size: 1.1em; 
    margin: 20px 10px 10px; 
    padding: 0; 
    -moz-column-count: 2; /* Firefox */ 
    -webkit-column-count: 2; /* Safari and Chrome */ 
    column-count: 2; 
    -moz-column-gap:30px; /* Firefox */ 
    -webkit-column-gap:30px; /* Safari and Chrome */ 
    column-gap:30px; 
} 

.mainContentSection p { 
    margin: 0 0 20px 0; 
    padding: 0; 
    border: 1px solid gray; 
}

偶爾第二列的頂部捕獲來自前一段的底部邊緣。這將從下圖中看到下一段的頂部。我嘗試了內置式，改變邊距，內嵌塊。所有的都取得了一些成功，但並不是最優的。我可以訪問第二欄以刪除該邊距嗎？

來源

2015-11-18 John

這張截圖是採取在Chrome。這不是一貫發生的情況。這就是爲什麼我拍了拍。當我試圖解決這個問題時，我已經出現並消失了這個問題並重新出現。例如，我將p顯示更改爲內聯塊，它將一個完整的p抽到第二列。一個解決方案，但不是我喜歡的。我解開了顯示屏的變化，問題沒有了。它遲早會返回。我也在其他網站上看到過它。我從不同的網站截圖，但似乎不能發佈。這經常發生，這是一個問題。 – John

根本就不是.mainContentSection元素上使用頂部空間，所以margin行將爲已讀：margin: 0 10px 20px 10px;

.mainContentSection { 
    font-size: 1.1em; 
    margin: 0 10px 20px 10px; 
    padding: 0; 
    -moz-column-count: 2; /* Firefox */ 
    -webkit-column-count: 2; /* Safari and Chrome */ 
    column-count: 2; 
    -moz-column-gap:30px; /* Firefox */ 
    -webkit-column-gap:30px; /* Safari and Chrome */ 
    column-gap:30px; 
}

來源

2015-11-18 00:39:42 EdwardM

謝謝，但它並沒有影響p傳遞到第2列的餘量或填充。 – John

CSS多列布局保證金問題

回答

相關問題