Question

我遇到嵌套div元素（#navbar）的问题，当你调整浏览器窗口大小但它跳了下来时，该元素应该保留在原位。这是HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 18</title>

<style>
    body{
        background-color: #ffffff;
        width: 100%;
        padding-left: 2%;
    }
    #container{
        left: 25%;
        width: 80%;
        background-color: dodgerblue;
        padding-bottom: 25px;
    }
    #header{
        background-color: orangered;
        height: 60px;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    #header h1{
        color: #ffffff;
    }
    #navbar{
        background-color: dodgerblue;
        display: inline-block;
        height: 340px;
        width: 22%;
        margin-left: 0px;
        margin-top: 0px;
    }
    #navbar ul li{
        list-style: none;
    }
    #content{
        margin: 0px;
        padding: 0px;
        word-break: break-all;
        background-color: white;
        height: 340px;
    }
    #content2{
        padding-left: 10px;
        width: 50%;
        display: inline-block;
        word-break: break-all;
        float: left;
    }
    #content2 h3{
        color: orangered;
    }
    #nyheter{
        padding: 15px;
        background-color: skyblue;
        display: inline-block;
        width: 25%;
        height: 310px;
    }
</style>
</head>
<body>

<div id="container">
    <div id="header">
        <h1><b>Webbplatsens namn</b></h1>
    </div>
    <div id="content">
        <div id="content2">
            <h3>Om webbplatsens namn</h3>
            <p>
                Text textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText text
            </p>
            <p>
                Text textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText text
                Text textText textText textText textText textText textText textText textText textText textText text
            </p>
        </div>
        <div id="nyheter">
            <h3><b>Nyheter</b></h3>
            Text textText textText textText textText textText textText textText textText textText textText text
            Text textText textText textText textText textText textText textText textText textText textText text
            Text textText textText textText textText textText textText textText textText textText textText textText text
            Text textText textText textText textText textText textText textText textText textText text
            Text textText textText textText textText textText textText textText textText textText text
            Text textText textText textText textText textText textText textText textText textText tex
        </div>
        <div id="navbar">
            <h3><b>Avsnitt</b></h3>
            <ul>
                <li><a href="#">Hem</a></li>
                <li><a href="#">Om</a></li>
                <li><a href="#">Tjänster</a></li>
                <li><a href="#">Medarbetare</a></li>
                <li><a href="#">Portfölj</a></li>
                <li><a href="#">Kontakta oss</a></li>
            </ul>
        </div>
    </div>
    <b style="float: right; text-align: center; color: #ffffff;">Copyright&nbsp;&copy;&nbsp;Webbplatsen 2014</b>
</div>

我最近开始使用html / css，所以我的代码可能没有最好的结构。

Answer 1

不确定我是否完全没有视觉理解你。上面的评论要求您设置jsfiddle.net演示并粘贴链接，以便我们可以完整地看到您的站点代码的布局。

关闭袖口，我会尝试将导航栏从#content div中取出，并使其成为#container的孩子。尝试将像素限制设置为宽度而不是百分比。也许为您的容器放置1000px的宽度并将#navbar设置为220p（22％）。

   #navbar{
       background-color: dodgerblue;
       display: inline-block;
       height: 340px;
       width: 220px;
       margin-left: 0px;
       margin-top: 0px;
   }

Answer 2

由于种种原因，它正在下降。

1）您没有使用box-sizing: border-box，这会使您更轻松，更直观地使用填充和边距。目前，你的填充超出你的div，这增加了它们的实际大小。通过添加实际尺寸，#navbar太大而无法放在#nyheter的右侧。

2）你没有正确使用定位。在您的容器上，使用margin: 0 auto将其置于页面中心。

3）你正在使用内联块试图让你的元素彼此相邻排列（并在那里混合浮点数）。内联块在元素之间创建空白区域，当这个边距占用足够的空间来溢出包含的div时，会弹出元素。相反，至少在这种情况下，对float: left的所有子项使用#content，然后在#content上使用clearfix hack，以便保留它的高度。

4）您无需将重点放在content2，nyheter和navbar上。

5）最后，在您的版权上使用clear:both，我在我的小提琴中添加了一个div，让它位于内容之下

这是一个小提示，向您展示修复所有内容时应该是什么样的：http://jsfiddle.net/kyleshevlin/9yj3V/

嵌套的div元素向下跳跃

2 个答案: