无法让div浮动到右边

当我将#main div浮动到右边时，右边框与头div的右边框没有对齐？无法让div浮动到右边

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

#wrapper { 
    width: 960px; 
    height: 100%; 
    margin: 0 auto; 
} 

#header { 
    width: 960px; 
    height: 70px; 
    border: 1px solid black;   
    margin-bottom: 20px; 
    margin-top: 20px; 
} 

#leftcol { 
    width: 250px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
    margin-right: 20px;   
} 

#main { 
    width: 686px; 
    height: 500px; 
    border: 1px solid black; 
    float:right; 
}

HTML

<html> 
    <body> 
    <div id="wrapper"> 
     <div id="header"> 
     </div> 
     <div id="leftcol"> 
     </div> 
     <div id="main"> 
     </div> 
    </div><!--end wrapper--> 
    </body> 
</html>

来源

2012-08-22 JDH

我们是否也可以看到您的标记？不能看到你的HTML很难给你一个解决方案。 – Chiubaka

是的，对不起，我已经加入了 – JDH

我做了一个jsfiddle：http://jsfiddle.net/vnaD8/ – LonelyWebCrawler

你忘了考虑标题的边框宽度。总共，您的标题宽度为960px + 2px，距边界= 962px，而主要内容加上侧边栏的宽度为960px。

如果将标题的宽度设置为958px，则两个div都对齐。

下面是CSS盒模型的引用来帮助你做数学题：CSS box model

来源

2012-08-22 00:33:40 alf

啊！我知道这很简单！非常感谢哟！ – JDH

@JDH没问题！ :) – alf

由于@alfonso指出，边框增加你的div的实际尺寸。

在所有具有边框的元素上使用box-sizing: border-box是一种很好的做法，以便边框进入内部。对齐变得更容易。

来源

2012-08-22 00:36:15 mash

谢谢，我从来没有听说过。将研究它 – JDH

无法让div浮动到右边

回答

相关问题