0

我正在使用“列计数”来创建一个向上对齐的项目网格（“ column-gap: 0px”）。

看起来不错，但是当我尝试实现无限滚动时问题就开始了。

我在第一个网格下方添加了另一个具有相同结构的网格，但无法将其与第一个网格的项目对齐。在部分之间创建一些不需要的间隙。

是否有任何与上述对象对齐的选项？

我只发现了对我没有帮助的垂直对齐标准选项。

这是它的外观：（项目有不同的高度）

.itemsSection{
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
}

.item{
    height: auto;
    border: 1px solid #DDD;
    border-radius: 2px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: text-top;
    padding: 3%;
    margin: 2%;
}


<div id="allItems">
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
<div class="itemsSection">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>
</div>
4

0 回答 0