关于div+css右对齐不齐的解决,原稿是sys的网页问题:
========================
<head>
<style type="text/css">
<!--
body{margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:4px; padding:0px;}
#wrap{width:940px; padding:0px; margin-left:auto; margin-right:auto;}
#top{width:100%; height:100px; border-color:#000099; border:1px solid; margin-bottom:4px;}
#bottom{width:100%; height:150px;border-color:#000099; border:1px solid;}
#left{width:80%; height:auto; float:left; padding:0px; border:1px solid #000099; margin:0px;}
#right{width:19%; height:auto; float:right; padding:0px; border:1px solid #000099; margin:0px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
==================
发现总是right不齐,20%就过行,研究了一下,发现是100%的问题,细调了一下,依然出错。于是和tcd简单探讨了一下,发现了问题所以。
原来
wap的总宽度是940+0+0 0是border
top是940+1+1 1是border,框有两条边
同理left+2+right+2不能>942
所以纠正的代码如下:
<!--
body{margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:4px; padding:0px;}
#wrap{width:942px; padding:0px; margin-left:auto; margin-right:auto;}
#top{width:940px; height:100px; border-color:#000099; border:1px solid; margin-bottom:4px;}
#bottom{width:940px; height:150px;border-color:#000099; border:1px solid;}
#left{width:536px; height:auto; float:left; padding:0px; border:1px solid #000099; margin:0px;margin-bottom:4px;}
#right{
width:400px;
height:auto;
float:right;
padding:0px;
border:1px solid #000099;
margin:0px;
clear: none;
margin-bottom:4px;
}
-->
</style>
这下齐了,这让我想到div+css的盒子结构,需要认真计算他们之间的关系,才能写好真正的div+css.