参见英文答案 >
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排列元素之后,差距就不再存在了.