Float:Right的margin设置

baacloud免费翻墙vpn注册使用

想得到的正确布局图:

结果在FireFox和IE中得到的结果却是:

造成这种情况的CSS代码是:

<style type="text/css">
<!--left-->
.left{
width:500px;
height:600px;
float:left;
border:0;
}
.sample{
width:500px;
height:200px;
float:left;
background-color:#666666;
}
.news{
width:500px;
height:200px;
float:left;
background-color:#006600;
}
<!--right-->
.right{
width:200px;
height:600px;
float:right;
}
.seachIt{
width:200px;
height:100px;
float:right;
background-color:#0066CC;
}
</style>
<body>
<div id="body" class="main">
<!--content-->
<div id="content" class="content">
<!--left content-->
<div id="left" class="left">
<div id="sample" class="sample">sample</div>
<div id="news" class="news">news</div>
</div>
<!--right menu-->
<div id="right" class="right">
<div id="seachIt" class="seachIt">seach</div>
</div>
</div>
</div>
</body>
</html>

分析错误原因,SeachIt的margin没有进行设置top属性,结果浏览器默认margin-top为sample的height
200px,结果造成一直错位,因此需要设置seachIt的margin-top:-200px,这样减少了margin的高度,修改后的代码如下:

<style type="text/css">
<!--left-->
.left{
width:500px;
height:600px;
float:left;
border:0;
}
.sample{
width:500px;
height:200px;
float:left;
background-color:#666666;
}
.news{
width:500px;
height:200px;
float:left;
background-color:#006600;
}
<!--right-->
.right{
width:200px;
height:600px;
float:right;
}
.seachIt{
width:200px;
height:100px;
float:right;
margin-top:-200px;
background-color:#0066CC;
}
</style>
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏