Question

我有以下布局，我从网上发现我发现div不会互相接触。因为在较低的div的顶部不触及它上面的div的底部..当边框打开但边框被移除时背景显示时它会这样做。标题不会触及边界消失的导航......？这是代码：

<html>
 <head>
  <title>A two column layout from the internet</title>
   <link rel="stylesheet" href="styles2.css"/>
  </head>
  <body>
   <div id="wrapper">
    <div id="header"><h1>Document heading</h1></div>
     <div id ="nav">
       <ul>
          <li><a href="#">option 1</a></li>
          <li><a href="#">option 2</a></li>
          <li><a href="#">option 3 </a></li>
          <li><a href="#">option 4 </a></li>
           <li><a href="#">option 5 </a></li>
       </ul>
     </div><!--navigation -->
     <div id ="main">
       <h2>column 1 #Main  float:left; </h2>
       <p> This is column one so we can imagine the text ,pictures etc in here </P>
      <p>Note the sum of the widths must add up to the width of the wrapper
          Note:adding a border to the main div moves the `enter code here`sidebar div down..
          so an increase of the wrapper by 2px fixes this so we may conclude that 
          the size of a div exludes borders.
       </p>
     </div><!-- main-->
     <div id="sidebar">
       <h2>column 2 #sidebar float:right</h2>
       <p> here stuff for column two... .....</p>
       <ul>
          <li><a href="#">link 1</a></li>
          <li><a href="#">link 2</a></li>
           <li><a href="#">link 3 </a></li>
        </ul>
     </div>
     <div id="footer">
       <p>footer</p>
       <p> Note without the clear both property added to the footer it does not sit below the content but underneath the  
        the floated content. floating an element takes it out of the document flow.. prior to the floats the footer does as expected sit
        below the sidebars.. left and right.. 
       </p>
         </div>
       <div><!-- end wrapper often used to centre the site-->
      </body>
    </html>

Answer 1

float属性应该修复它。只需向左（或任何地方）浮动div。

#header {
    float:left;
}
#nav {
    float:left;
}

填充0和边界0的div之间的间隙

1 个答案: