參見英文答案 >
Why is there an unexplainable gap between these inline-block div elements? 6個
我正在使用CSS列布局子產品建立流暢的布局,當2個或更多元素位于列的同一“行”時,我看到意外的結果.元素之間将出現3到4 px的間隙.我已經在IE11,FireFox 24,Chrome 31和Safari 5.1.7中進行了測試,它們都表現出相同的行為.
1 2 3 4 5 6 7 8
.tile-container {
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;
column-fill: auto;
height: 502px;
background-color: gray;
}
.tile-large {
width: 250px;
height: 250px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: green;
}
.tile-wide {
width: 250px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: blue;
}
.tile-small {
width: 125px;
height: 125px;
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: inline-block;
background-color: red;
}
我不想開始使用負邊距來縮小差距,因為我想引入拖放行為.左邊的浮動将消除差距,但這引入了另一組問題.奇怪的是,當我使用jQueryUI sortable時,在drop事件和jQueryUI排列元素之後,差距就不再存在了.