inline-block DIV元素之间的额外空间 [英] Extra Space Between inline-block DIV Elements

问题描述

我使用CSS列布局模块创建一个流畅的布局，并且当两个或多个元素在列的同一行中时，会看到意外的结果。在元素之间将出现3到4像素的间隙。我在IE11测试，FireFox 24，Chrome 31和Safari 5.1.7，他们都表现出相同的行为。

I am creating a fluid layout using the CSS column layout module and am seeing unexpected results when 2 or more elements are in the same 'row' of a column. A 3 to 4 px gap will appear between the elements. I've tested in IE11, FireFox 24, Chrome 31, and Safari 5.1.7 and they all exhibit the same behavior.

<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排列元素后，差距就不再存在。

I don't want to start using negative margins to close the gap as I want to introduce drag/drop behavior. Float left will remove the gap, but that introduces another set of issues. Oddly enough, when I use jQueryUI sortable, after the drop event and jQueryUI arranges the elements, the gap is no longer there.

推荐答案

您需要注释掉元素之间的空格，例如：

You need to comment out the white space between the elements, like so:

<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中的元素放在一行中，而且它们之间没有任何空格，但这会降低代码的可读性：

Another way is to put the elements in the HTML in one line without any spaces between them, but this reduces the code readability:

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

这篇关于inline-block DIV元素之间的额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！