Question

我认为我错过了一个非常重要的CSS规则，以确保当我使用margin-top时，例如我的页脚和图像下方的H1元素将无法识别图像并开始使用边距从那里开始。

示例：我必须使用margin-top：50px;获取图像下方的H1元素，否则文本将显示在图像上而不是下方。

当使用h1时，它的工作正常{MARGIN-TOP：50px;}：

main {
    margin: 0 auto;
    width: 960px;
}

body {
    margin: 0;

}

/*navigation*/

#navigation {
    font-family: 'Aller Display';
    color: black;

}

#logo {
    float: left;
    width: 229px;
    height: 100px;
    margin-left: 52px;
    margin-top: 0;
    clear: both;

}

#mobilemenu {
    display: none;
}

#navigation_list {
    float: right;
    overflow: hidden;
    }

#navigation_list li {

    display: inline-block;

}

#navigation_list li a {
    margin-top: 0;
    line-height: 75px;
    margin-right: 10px;
    font-size: 24px;

}

#navigation_list li a:hover {

    color: #f07c00;

}

#rightnav {
    margin-right: 22px;
}

/*overzicht gerechten*/
h1.overzichtger {

    font-family: 'Aller Bold';
    margin-left: 150px;
    font-size: 28px;
    margin-top: 50px;


}

div.centerimg {

    text-align: center;

}

img.imgoverzichtgerechtlinks {
    float: left;
    width: 470px;
    height: 176px;
    overflow: hidden;

}

img.imgoverzichtgerechtrechts {

    float: right;
    width: 470px;
    height: 176px;
    overflow: hidden;


}


/*footer*/

footer {

    font-family: 'Aller Bold';
    margin-top: 15px;
    font-size: 21px;
    height: 55px;
    background-color: #f07c00;
    color: black;
    line-height: 55px;
    width: 100%;
}

#test {
    float: right;
    display: inline-block;

<main>

    <nav id="navigation">
        <img src="logo.jpg" id="logo">
        <a id="mobilemenu" class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
        <ul id="navigation_list" role="navigation">
            <li><a href=#>Nieuws</a></li>
            <li><a href=#>Info</a></li>
            <li><a href=#>Bezienswaardigheden</a></li>
            <li><a href=#>Keuken</a></li>
            <li id="rightnav"><a href=#>Steden</a></li>
        </ul>
    </nav>

        <br> <br>



        <img src="geroverzicht1.jpg" class="imgoverzichtgerechtlinks">
        <img src="geroverzicht2.jpg" class="imgoverzichtgerechtrechts">
        <br><br>
        <div class="test">
        <h1 class="overzichtger">Pepernoten</h1>
            </div>



    <footer>
        <div id="test">
        </div>
    </footer>


</main>

不知道该怎么做了，我一直在检查有关同一问题的stackoverflow上的其他主题，并且我添加了溢出：隐藏到两张图片，因为它们是浮动的。

Answer 1

这种情况正在发生，因为您将两个图像浮动在h1上方。当你浮动一个元素时，它会从文档流＆＃34;中取出，并告诉渲染引擎显示后面的元素＆＃34;在它旁边＆＃34;。

所以会发生的情况是，您的var app = express.createServer();（包含<div class="test">的那个）会尝试在您浮动的两张图片旁边。

可能的解决方案：

将h1设置为<div class="test">，这基本上是指示浏览器不会在其旁边放置任何内容，无论之前的浮动元素是什么。
不要使用花车。将图像设置为clear:both，这似乎就是您要做的。别忘了设置display: inline-block。这部分是vertical-align被发明的原因 - 浮动布局可能令人困惑且难以管理。

此外，请尝试不在代码中使用display:inline-block来创建空间。另请注意，并非所有浏览器都支持<br>标记。

为什么从网站顶部而不是上面的元素计算保证金最高？

1 个答案: