参见英文答案 >
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中进行了测试,它们都表现出相同的行为.
我正在使用CSS列布局模块创建流畅的布局,当2个或更多元素位于列的同一“行”时,我看到意外的结果.元素之间将出现3到4 px的间隙.我已经在IE11,FireFox 24,Chrome 31和Safari 5.1.7中进行了测试,它们都表现出相同的行为.
<div class="tile-container">
<div class="tile-large">1</div>
<div class="tile-wide">2</div>
<div class="tile-small">3</div>
<div class="tile-small">4</div>
<div class="tile-small">5</div>
<div class="tile-small">6</div>
<div class="tile-wide">7</div>
<div class="tile-large">8</div>
</div>
.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排列元素之后,差距就不再存在了.
解决方法
您需要注释掉元素之间的空白区域,如下所示：
<div class="tile-container">
<div class="tile-large">1</div><!--
--><div class="tile-wide">2</div><!--
--><div class="tile-small">3</div><!--
--><div class="tile-small">4</div><!--
--><div class="tile-small">5</div><!--
--><div class="tile-small">6</div><!--
--><div class="tile-wide">7</div><!--
--><div class="tile-large">8</div>
</div>
演示：http://jsfiddle.net/P7cbA/11/
另一种方法是将HTML中的元素放在一行中,它们之间没有任何空格,但这会降低代码的可读性：
<div class="tile-container">
<div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>
