载入中。。。 'S bLog
 
载入中。。。
 
载入中。。。
载入中。。。
载入中。。。
载入中。。。
载入中。。。
 
填写您的邮件地址,订阅我们的精彩内容:


 
关于div+css右对齐不齐问题的解决
[ 2008/10/3 12:02:00 | By: 梦翔儿 ]
 

关于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.

 
 
  • 标签:div css 右对齐 不齐 解决 
  • 发表评论:
    载入中。。。

     
     
     

    梦翔儿网站 梦飞翔的地方 http://www.dreamflier.net
    中华人民共和国信息产业部TCP/IP系统 备案序号:辽ICP备09000550号

    Powered by Oblog.