Question

我认为这是一个糟糕的头衔，所以如果有人能给我一个更好的头衔，请告诉我。

问题：当我在浏览器开发人员工具中调整网页大小时，它首先会很好（当我将其缩小时）但是当我再次将小部分缩小时，它会变得很奇怪。

有问题：

我能解决这个问题吗
这是一个问题，因为它只会在你第一次做小而后大时发生，我不认为人们会在一个随机的网页上这样做。

可能是因为它首先是这样的

block1, block2, block3{
   display: table-cell;
}

然后我改变它

@media only screen and (max-width: 860px) { 
    block1{display: block;} 
    block2{display: inline-block;} 
    block3{display: inline-block;}
}

图片显示了所有3个阶段：

页脚的最后一个阶段应该与页脚的第一个阶段相同。

如果需要页脚的完整html和css代码

真实HTML：

<div class="bottom-content">
    <div class="size">
        <div class="content1">
            <img src="img/book.png" alt="over ons" class="footer-icon">
            <h2>Over "E.R.D. Easy"</h2>
            <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,
                viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
                Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget
                dui.</p>
        </div>
        <div class="content2">
            <img src="img/certificaat-icon.png" alt="Certificaat" class="footer-icon">
            <h2>Certificaten</h2>
            <img src="img/certificaat.png" class="certificaat" alt="Certificaat">
        </div>
        <div class="content3">
            <img src="img/about-us.png" alt="Contact" class="footer-icon">
            <h2>Contact</h2>
            <p>E.R.D. Easy<br>
                Fahrenheitstraat 45-47<br>
                6716 BR Ede (Holland)<br><br>
                [T] +31 318 64 18 30 <br>
                [E] info@ERD_Easy.nl
            </p>
        </div>
    </div>
</div>
<div class="copyright_bottom">
    <p class="centered_different">@copy <?php echo date("Y"); ?> E.R.D. Easy International BV.
        <a href="sitemap.php" class="sitemap">Sitemap</a></p>
</div>

真正的CSS：

footer {
    margin: 0;
    padding: 0 0 0 0;
    background-color: rgba(235, 103, 12, 0.1);
}

.bottom-content .content1, .bottom-content .content2, .bottom-content .content3 {
    display: table-cell;
    padding: 0.5em 0 1.5em 0;
    vertical-align: top;
    border-spacing: 20px;
}

footer .bottom-content .content1 {
    width: 50%;
    text-align: center;
    line-height: 1.3em;
}

footer .bottom-content .content2 {
    width: 20%;
    padding: 0.5em 50px 1.5em 80px;
    text-align: center;
}

footer .bottom-content .content3 {
    text-align: center;
    line-height: 1.4em;
}

@media only screen and (max-width: 860px) {
    footer .bottom-content .content1 {
        margin: 0 auto;
        width: 90%;
        padding: 30px 0;
        display: block;
        border-bottom: 1px rgba(235, 103, 12, 0.1) solid
    }

    footer .bottom-content .content2 {
        width: 49%;
        padding: 30px 0 0 0;
        display: inline-block;
    }

    footer .bottom-content .content3 {
        width: 49%;
        padding: 30px 0 30px 0;
        display: inline-block;
    }
}

@media only screen and (max-width: 500px) {
    .bottom-content .content1, .bottom-content .content2, .bottom-content .content3 {
        display: block;
    }
    footer .bottom-content .content1 {
        margin: 0 auto;
        width: 90%;
        padding: 30px 0;
    }

    footer .bottom-content .content2 {
        margin: 0 auto;
        width: 90%;
        padding: 30px 0;
    }

    footer .bottom-content .content3 {
        margin: 0 auto;
        width: 90%;
        padding: 30px 0;
    }
}

.footer-icon {
    margin-top: 5px;
}

footer .bottom-content p {
    padding-top: 0;
    text-align: center;
}

footer .bottom-content h2 {
    margin-bottom: 1em;
    text-align: center;
}

footer .bottom-content a {
    text-decoration: none;
}

footer .bottom-content li {
    list-style: none;
    margin-left: 1.5em;
    text-align: center;
}

footer .bottom-content ol {
    display: table-cell;
}

footer p {
    color: #414141;

}

footer .copyright_bottom {
    background: #EEEEEE;
    border-top: 1px solid #CBCACA;
    padding-bottom: 10px;
    max-height: 60px;
}

在浏览器开发者工具中调整大小会破坏页脚

0 个答案: