Question

我正在玩网页设计，我总是假设div是相对定位的，总是以它们编码的方式排序。但是现在我有一个跳过另一个的div虽然它们都是相对的。

问题的截图：

Example of the problem

以下是我的index.html

的代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/layout.css">
    <link rel="stylesheet" type="text/css" href="CSS/nav.css">
    <meta name="description" content="Website template 1">
    <meta name="keywords" content="template">
    <meta name="author" content="">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="MainContainer">
        <div id="HeaderContainer">
            <div id="NavigatieContainer">
                <ul id="nav">
                <!-- LVL 1 -->
                    <li>
                        <a href="Index.html">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="BodyContainer">
            <p>test</p>
        </div>
    </div>
</body>
</html>

这是我的布局代码css：

/*Basic tags*/
body {
    background-color: #efebdf;
}

/*DIV ID's*/
div#MainContainer {
    width: 60%;
    margin-left:auto;
    margin-right:auto;
}

div#HeaderContainer {
    position: relative;
}

div#NavigatieContainer {
    float: right;
}

div#BodyContainer {
    position: relative;
    background-color: brown;
}

和我的导航css的代码到目前为止，虽然我认为问题不在这里：

a {
  color:#333333;
}
#nav {
  /*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
  border-radius: 0.3em;
  position: relative;
  z-index: 5;
}
#nav li {
  margin-right: 10px; /*spacing tussen de list items*/
  float:left;/*zorgt voor naast elkaar te plaatsen*/
  list-style:none;/*Haalt list bolletjes weg*/
  position:relative;
  border-radius: 0.3em;
  background-color: #e2e0d3;
}
#nav a {
  color:black;
  display:block;
  font-weight:bold;
  margin:0;
  padding:8px 20px;
  text-decoration: none;
}

Answer 1

@Adrift几乎是正确的，但他提到了错误的div。 overflow属性应该在HeaderContainer上。

div#HeaderContainer {
    position: relative;
    overflow: auto;
}

我为你创造了一个结果的jsfiddle。您可能希望将其添加到以下任何问题中，因为它可以让我们更轻松地检测问题。

http://jsfiddle.net/7Kx9g/

更多背景信息;一旦图像浮动，它就不再存在于文档中，因此不会保留它自己的高度。可以使用名为clearfix的技巧来阻止它，但它是使用overflow: auto;或overflow: hidden;

的高级方法

Answer 2

问题是浮动造成的。将clear:both;放入div#BodyContainer的css中。

看这里http://jsfiddle.net/aKy67/

道达尔同意@HC _

Answer 3

您知道如何使用内联块吗？ IMO，使用display:inline-block;组织事情要比使用float更容易，因为float会忽略几个CSS规则，项目越大，越多麻烦这个＆＃34;规则忽略＆＃34;有可能成为。

通过位置相对定位div元素

3 个答案: