相关疑难解决方法(0)

我正在使用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: …