div与填充0和边框0之间的差距0

我有我从网上得到的以下布局，我发现divs互不接触。由于在顶部的div不接触上面的div的底部。当边框打开时，但当背景显示时，边框被移除时会出现。标题不会触摸导航，边框不见了...？这是代码：div与填充0和边框0之间的差距0

<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>

来源

2015-08-31 Laurence kite

你可以做一个小提琴吗？ – Webruster

浮动属性应该修复它。只需将div放在左侧（或任何地方）即可。

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

来源

2015-08-31 17:07:18

div与填充0和边框0之间的差距0

回答

相关问题