html 块元素 内联元素 互相转换,html – 内联块DIV元素之间的额外空间[复制]

参见英文答案 >

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