Question

这是为我拥有的每个图像创建的HTML。

如您所见，图像和类votingContainer的div都是stickySpecificContainer的子级。 stickySpecificContainer是内联块，它采用其内容的宽度和高度，在这种情况下为图像。 votingContainer的位置是：absolute在其父级的左上角，在本例中为stickySpecificContainer。

现在这一切都很好，但除了像stickySpecificContainer这样的每个内联块都有默认的底部边距之外，这完全与我的布局有关。

    <div class="home-container-element">
        <div class="stickySpecificContainer">

            <img class='home-image' src='' alt='Random image'>

            <div class='votingContainer'>
                <a href='#' class='' id=''></a>
                <a href='#' class='' id=''></a>
            </div>

        </div>
    </div>

CSS

.home-container-element {
    text-align: center;
    position: relative;
    width: 100%;
    margin-bottom: 6px;
}
.home-image {
    position: relative;
    display: block;
    width: 100%;
    max-height: 800px;
    object-fit: cover;
}
.stickySpecificContainer {
    position: relative;
    z-index: 2;
    display: inline-block;
}
.votingContainer {
    position: absolute;
    top: 10px;
    left: 10px;
}

Answer 1

只需在您的家用容器上将字体大小设置为0

.home-container-element {
   font-size: 0;

并将其设置回您需要的投票容器上

.votingContainer {
   font-size: 12px;

这将删除块之间的空白。

编辑： 能够查看页面后，原来的问题是家用容器需要在响应式布局中调整其宽度。设置内联块时，子容器的宽度不再是100％，因此需要与其一起设置。为了消除内联块附带的底部边距，请采用上述原始答案。

是否有其他绝对位置用于将元素放置在元素上方？

1 个答案: