Question

我有以下代码片段，想知道为什么前三个元素之间的间距与第三和第四元素之间的间距不同

.textFMT2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    font-size: 1.5vw;
}

.links4 {
    width: 100%;
}

.links4 span {
    display: block;
    background-color: #538231;
    text-align: center;
    width: 50%;
    border-radius: 10vw;
    padding: 1vw 0;
    margin: 0 auto;
}

span {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

.textFMT2 .arrowsForScroll {
    position: relative;
}

.arrowsForScroll {
    position: absolute;
    bottom: 2vw;
}

.arrowsForScroll {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

a.left, a.right {
    text-decoration: none;
    font-weight: bolder;
    font-size: 32px;
}

.left, .right {
    display: none;
}

.sections {
    background-color: #b3d7f7;
    /* width: 32vw; */
    color: #538231;
    font-size: 16px;
    text-align: center;
    position: relative;
    height: 100%;
}

.links4 a {
    text-decoration: none;
    color: white;
}

<div class="textFMT2">
                            <div class="links4">
                                <span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Get Involved">Sign up for our<br>Quarterly Newsletter</a></span>
                            </div>
                            <div class="links4">
                                <span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Calendar">Attend an<br>Event</a></span>
                            </div>
                            <div class="links4">
                                <span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Get Involved">Volunteer with<br>SWAG</a></span>
                            </div>
                            <div class="arrowsForScroll">
                                <a class="left" href="#section2"><!--&uarr;--> &nbsp;</a>    
                                <div class="links4">
                                    <span><a href="https://www.sustainablewestonma.org/swag/public/php/homeCtrl.php?place=Donate">Donate to help<br>our work</a></span>
                                </div>
                                <a class="right" href="#">&nbsp;</a>
                            </div>
                        </div>

Answer 1

由于在此处将位置设置为relative，因此创建了不同的间隙大小：

.textFMT2 .arrowsForScroll {
    position: relative;
}

具有position: relative;的元素相对于其正常位置定位。

设置位置相对的元素的top，right，bottom和left属性将导致将其调整为偏离其正常位置。其他内容将不会进行调整以适合元素所留的任何空隙。

因此您需要将其明确设置为static

.textFMT2 .arrowsForScroll {
    position: static;
}

静态放置的元素不受top，bottom，left和right属性的影响。

带有position: static;的元素没有以任何特殊的方式放置；始终根据页面的正常流程定位

编辑：整个问题源于在position: absolute中将flex项目设置为.arrowsForScroll（这是两次定义的方法），我假设您编写了选择器.textFMT2 .arrowsForScroll来补偿为了那个原因。因此，只需完全删除以下两个选择器，即可固定布局：

.textFMT2 .arrowsForScroll {
    position: relative;
}

.arrowsForScroll {
    position: absolute;
    bottom: 2vw;
}

flexbox间隔均匀-间隔不均匀

1 个答案: