时间戳

首页 > 解决方案 > 当屏幕较小时，当我的弹性框进入垂直行时，它们的背景不会跟随它们

html - 当屏幕较小时，当我的弹性框进入垂直行时，它们的背景不会跟随它们

问题描述

好的，我的问题是，你看到它何时最大化，它是如何在弹性盒后面有背景的吗？现在，如果您最小化屏幕，因为它是响应式的，它将把它放在 2 行中，但是 flexboxes 的背景仅在第一行而不是在第 2/3 行，所以它不是在每个框的后面，这就是我的问题，如果有人可以修复和解释，将不胜感激， FIDDLE：https://jsfiddle.net/vu4eaw2t/代码（检查 FIDDLE THO 代码就在此处，以便我可以发布此帖子）：

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="js/design.js"></script>
    </head>
    <body style="margin: 0;">
        <div class="navmenu">
            <ul style="list-style: none;" class="nav">
                <li>Home</li>
                <li>Purchase</li>
            </ul>
            <ul style="list-style: none;" class="navb">
                <li><a>Account</a></li>
            </ul>
        </div>
        <div class="features">
            <div class="featuresbox"><p class="FeatureTitle">Lorem Ipsum</p><p class="FeatureDescription">Lorem ipsum</p></div>
            <div class="featuresbox"></div>
            <div class="featuresbox"></div>
            <div class="featuresbox"></div>
        </div>
    </body>
</html>

CSS（再次检查小提琴不要使用这个小提琴会解释你我的问题，但请务必阅读我上面所说的）：

body {
    font-family: 'Arial Narrow Bold', sans-serif;
    background-color: rgba(84, 111, 219, 0.959);;
    margin-bottom: 15px;
}

.navmenu {
    width: 100%;
    display: flex;
    background-color: rgb(28, 109, 231);
    justify-content: space-between;
}

.navb {
    margin-right: 24px;
}

.navmenu > ul > li {
    float: left;
    color: rgb(255,255,255);
    font-size: 18px;
    margin-right: 50px;
}

.navmenu > ul > li:hover {
    transform: scale(1.03);
    color: rgb(119, 151, 240);
    transition: 0.4s;
}
.navmenu > ul > li:not(:hover) {
    transform: scale(1);
    color: rgb(255,255,255);
    transition: 0.4s;
}

.features {
    width: 100%;
    height: fit-content;
    margin-top: 50px;
    background-color: rgba(75, 105, 221, 0.651);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.featuresbox {
    height: 250px;
    width: 270px;
    border-radius: 4px;
    background-color: rgba(45, 81, 224, 0.651);
    float: left;
    margin: 25px;
    color: rgb(255,255,255);
}

.FeatureTitle {
    font-size: 25px;
    text-align: center;
}

.FeatureDescription {
    text-align: center;
    margin-left: 6px;
    margin-right: 6px;
}

@media screen and (max-width: 950px) {
    .navmenu > ul > li {
        font-size: 15px;
        margin-right: 33px;
    }
    .features {
        height: 300px;
    }
}

标签： htmlcss

解决方案

那里有一个小错误，你只是features用这个媒体查询限制了 div 的高度：

@media screen and (max-width: 950px) {
    .features {
        height: 300px;
    }
}

因此，每当屏幕达到950px或降低featuresdiv 高度时300px，它就不会覆盖那里的所有框。

要修复它，您所要做的就是删除上述媒体查询样式，然后就可以了。

推荐阅读