Chrome中的列寬中斷div

Chrome中斷了div，而不是擴大列寬塊中的外部容器。Chrome中的列寬中斷div

一個像素以上的寬度解決了這個問題。另一個列表項。這怎麼可以避免？

小提琴可以在這裏https://fiddle.jshell.net/papa_bravo/01dzhwpz/

.my-list { 
 
    border: 1px red solid; 
 
    column-width: 70px; 
 
    width: 226px; 
 
} 
 

 
.my-item { 
 
    height: 40px; 
 
    width: 50px; 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid blue; 
 
}

<div class="my-list"> 
 
    <div class="my-item">Test1</div> 
 
    <div class="my-item">Test2</div> 
 
</div>

來源

2017-06-15 ratatosk

看來，如果你刪除。我的項目級的float: left;工作。

來源

2017-06-15 13:15:55 zoku

這解決了這個問題。你能解釋爲什麼嗎？ – ratatosk

我只能猜測。浮動似乎會干擾列對齊並混淆行爲。如果添加第三列，則三個div浮動在一行中，而不是分配到列中。根據http://caniuse.com/#search=column-width，還不完全支持列。 – zoku

Chrome中的列寬中斷div

回答

相關問題