Question

在此我希望div #intro浮动在div #navtop下方。

此刻它徘徊在右下方。

   <style> 

  #wrapper {
   width:850px;
   height:auto;
   margin:auto;
   font-family:Arial, Helvetica, sans-serif;
   }

  #header {
   height:100px;
   width:850px;
   margin:0;
   margin-top:25px;
   background:url(img/header.png) no-repeat #000 ;
   border:2px #000 solid;
   }

  #navtop {
   width:auto;
   height:45px;
   float:left;
   background:#000;
   padding-right:8px;
   }

  #navtop a {
   width:500px;
   margin:0px;
   margin-left:8px;
   padding-left:4px;
   padding-right:4px;
   color:#FFF;
   padding-bottom:0px;
   text-decoration:none;
   }

  #logo {
   height:40px; 
   width:40px;
   margin-left:4px;
   }

  #navtop a:link {
   background:#666;
   }

  #navtop a:hover {
   color:#999;
   }

  #intro {
   width:auto;
   height:auto;
   float:left;
   background:#666;
   margin-top:70px;
   padding:4px;
   border:2px #000 solid;
   }

  #about {
   width:500px;;
   height:auto;
   float:right;
   background:#666666;
   margin-top:25px;
   padding:5px;
   border:2px #000 solid;
   }

  h2 {
   font-family:Arial, Helvetica, sans-serif;
   color:#FFF;
   margin:0px;
   padding:0px;
   }

  body {
   background:#999;
   }

 </style>

  </head>

 <body>
 <div id="wrapper">
<div id="header"></div>

<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
<a href="link.php">Home</a>
<a href="link.php">About</a>
<a href="link.php">tour</a>
<a href="link.php">photos</a>
<a href="link.php">contact</a>
</div>
<div id="intro">
   <img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
   <div id="about"> <h2>DJ TECHIE LUNCHBOX</h2> 
  <p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
  leave any with a head without for for chips and shandy . chocolate malnurishment bring a        chip bang mismosh to her long term goals
 .</p>
 .
 </div>


 </div>
</body>

Answer 1

这是因为float: left;上有#intro。

试试这个：

 #intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
 }
 #about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;

}

编辑

以使#about div浮动到#intro div。

旁边

Answer 2

如果您仍希望浮动到其他框的左侧（我假设您这样做），请尝试将clear: left添加到#intro CSS。这将导致框分解到导致它向右移动的任何元素下面并开始一个新行。

 #intro {
 width:auto;
 height:auto;
 float:left;
 background:#666;
 margin-top:70px;
 padding:4px;
 border:2px #000 solid;
 clear:left;
 }

Answer 3

不要在#navtop上使用float:left。它想在彼此旁边排列#navtop和#intro divs

Answer 4

我不是百分百肯定我明白你想要完成什么，但我会抓住它

您可以使用规则

定位#navtop

#navtop{clear: right;}

或者只是从#intro

中删除float：left

其中任何一个都会在导航

下移动#intro

但是，如果您希望简介旁边的某个内容，则必须使用clear：right on navtop

帮助CSS浮动div

4 个答案: