文本

Question

我正在努力实现这一点 - ＆gt; ideal layout

（黑框是注册/登录部分，蓝色是导航栏，红色是标题区域，其中包含一些

文本

内容）我试图通过这个获得结果CSS：

@import url(//fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);

html, body {
  margin:0;
  padding:0;
  background-color:#fff;
  font-family: 'Droid Sans', arial, serif;
  color: #777;
  font-size: 14px;
}
a {
  color: #2e4987;
  text-decoration: none;
}
img {
  border: 0;
  width: 250 px;
  height: 250px;
  margin: auto;
}



#nwtBox {
  margin: 0 auto;
  width: 960px;
  height: 800px;
}
#nwtBox h1 {
  color: #333;
  font-weight: normal;
  margin: 0 0 20px 0;
  padding: 0;
}
#nwtBox h1 span {
  float: right;
  font-size: 14px;
  font-weight: normal;
}
#nwtBox h2 {
  font-weight: normal;
  font-size: 20px;
  padding: 0;
  margin: 0 0 10px 0;
  color: #333;
}
#nwtBox h3 {
  padding:0;
  margin: 0;
}
#nwtBox h3 img {
  vertical-align: middle;
}



#nwtBox #header {
  width: 960px;
  background-color:#fff;
  height: 100px;
  border: solid;
  border-width:thin;
  border-color: red;
}

#nwtBox #header h1 {

  text-align: center;
}

#nwtBox #navigation {

  width: 960px;
  background-color:#fff;
  height: 100px;
  border: solid;
  border-width:thin;
  border-color:blue;
}
#nwtBox #navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#nwtBox #navigation ul li {

  padding: 0 30px 0 0;
  font-weight: bold;
}
#nwtBox #navigation ul li a {
  color: #a8a8a8;
  text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
  color: #2e4987;
}
#nwtBox #navigation .main-nav {
  width: 500px;
  overflow: auto;
}


#nwtBox #navigation {
  float: left;
  padding: 35px 0 0 0;
}
#nwtBox #navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#nwtBox #navigation ul li {
  float: left;
  padding: 0 30px 0 0;
  font-weight: bold;
}
#nwtBox #navigation ul li a {
  color: #a8a8a8;
  text-decoration: none;
}
#nwtBox #navigation ul li a:hover {
  color: #2e4987;
}
#nwtBox #navigation .main-nav {
  width: 500px;
  overflow: auto;
}



#nwtBox #signupLogin {

  float:right;
  width: 400px;
  overflow: none;
  padding: 32px 0 0 0;
  text-align: right;
  color: #999999;
  border: solid;
  border-width:thin;
  border-color:red;
}

和这个HTML

<body>
<div id ="nwtBox">


   <div id ="signupLogin">
      <ul>
        <li> <a href =''> Sign Up</a>
        </li>
        <li> <a href =''> Log In</a>
        </li>
     </ul>
    </div>
  <div id = "navigation">
           <ul class="main-nav"> 
            <li class="main-nav-selected"> 
              <a href="index.php">HOME</a> 
            </li> 

             <li>              
              <a href="stuff.php">STUFF</a> 
            </li> 
            <li> 
              <a href='stuff.php'>STUFF</a> 
            </li> 
          </ul>
  </div>
 <div id ="header">
   <h1> TEXT</h1>
 </div>

  </body>

而不是期望的结果，我得到： bad layout

出了什么问题？

Answer 1

将clear:both添加到导航栏

#nwtBox #navigation {
  float: left;
  padding: 35px 0 0 0;
  clear:both;
}

Answer 2

浮子不会干扰相对放置的元素;内容将围绕浮动流动。由于您将导航和登录框都设置为浮动，因此它们不会影响内容div的定位。如果你想让事情变得简单，你可以简单地给内容div一个等于loginHeight + loginTopMargin + navHeight + navTopMargin的上边距，你就可以了。

Answer 3

试试这个：

#nwtBox #navigation {
  clear: both;
  //remove float: left;
  padding: 35px 0 0 0;
}

如果您想将float: left保留在#navigation中，可以将带有样式clear: both的div添加到HTML代码中。

<div id="signupLogin>
...
</div>

<div style="clear: both"></div>

<div id="navigation">
...

问题是在CSS中定位这些块

文本

3 个答案: