内联块DIV元素之间的额外空间

Question

我正在使用CSS列布局模块创建一个流畅的布局，当两个或多个元素位于同一列的“行”时，我会看到意想不到的结果。元素之间将出现3到4个px间隙。我在IE11、FireFox 24、Chrome 31和Safari5.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排序时，在drop事件和jQueryUI安排元素之后，差距就不再存在了。

Answer 1

您需要注释掉元素之间的空白，如下所示：

<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>

Answer 2

您正在看到div元素之间的空格。从HTML中删除空格，或者将容器的字体大小设置为零，这样就不会呈现空格。

.tile-container {
    font-size: 0
}
.tile-container > div {
    font-size: 14px; /* Or whatever you like. */
}