当我将#main 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>
最佳答案
正如@alfonso 指出的那样，边框会增加 div 的实际大小。
最好在所有带边框的元素上使用 box-sizing: border-box，这样边框就在里面了。对齐变得更加容易。
关于css - 无法让 div 一直向右浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12064829/