多列布局開始在相同的高度

正如你可以看到，第二元件比其它三個元件下35px。原因是，每個元素都有一個margin-bottom: 35px;但是爲什麼它被追加到頂端？如果我加display: inline-block我可以防止，但是然後列在第二次後中斷...

我該如何解決這個問題？

#items { 
 
    display: block; 
 
    column-width: 3rem; 
 
    column-gap: .35rem; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: all .25s ease-in-out; 
 
    transition: all .25s ease-in-out; 
 
} 
 
#items.show { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#items .item { 
 
    width: 100%; 
 
    margin: 0 0 .35rem; 
 
    padding: 0; 
 
    display: inline-block; 
 
    column-break-inside: avoid; 
 
    break-inside: avoid-column; 
 
}

<div class='show' id='items'> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
    <div class='item'></div> 
 
</div>

此外，我只得到了在Chrome這個問題; Firefox和Microsoft Edge工作正常。

來源

2016-10-21 jonhue

With Display：inline-block，try margin-right：-4px。

這是一個已知的顯示直列塊問題

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2016-10-21 15:18:37 joncodo

嗯...不會改變任何東西 – jonhue

我想這是不是這樣對我，因爲'直列block'它打破2後列，但如果我完成了兩行，它將在sec列中重新開始，依此類推等等。我不是一個奇怪的事情，我從來沒有遇到過... – jonhue

此外，我只有這個問題在鉻，Firefox和邊緣工作正常 – jonhue

多列布局開始在相同的高度

回答

相關問題