Question

我正在使用CSS列布局模块创建一个流畅的布局，并且当两个或多个元素位于同一行＆＃39;行时，我看到了意外的结果。一栏。元素之间将出现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排列元素之后，差距就不再存在了。

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>

DEMO：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. */
}

Answer 3

该问题是white-space元素之间生成的inline-block。避免这种情况的一种方法是增加负余量：

.tile-large, .tile-wide, .tile-small {
  display:inline-block;
  margin-right:-4px;
}

_{该值可以更改取决于parent font-size}

演示 http://jsfiddle.net/P7cbA/7/

有更多选项可以删除该空间，选择最符合您口味的空间，您可以查看好文章http://css-tricks.com/fighting-the-space-between-inline-block-elements/

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

3 个答案: