固定大小两栏布局技巧。放大缩小不出问题。 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }    /*清除浮动css3*/

.main1{ width:980px; height:600px; margin:0 auto; border:2px solid #000; overflow:hidden;}
.main1 .mainleft{ width:177px; height:100%; float:left; background:red;}
.main1 .mainright{ width:801px; height:100%; margin-left:177px; background:blue; border-left:2px solid #000;}


.main2{ width:980px; height:600px; margin:10px auto; border:2px solid #000;}
.main2 .mainleft{ width:177px; height:100%; float:left; background:red;}
.main2 .mainright{ width:803px; height:100%; float:left; background:blue; }

.main3{ width:980px; height:600px; margin:10px auto; border:2px solid #000;}
.main3 .mainleft{ width:177px; height:100%; float:left; background:red;}
.main3 .mainright{ width:801px; height:100%; float:left; background:blue; border-left:2px solid #000;}

</style>
</head>

<body>
<div class="main1">
    <div class="mainleft"></div>
    <div class="mainright"></div>
</div>

<div class="main2 clearfix">
    <div class="mainleft"></div>
    <div class="mainright"></div>
</div>

<div class="main3 clearfix">
    <div class="mainleft"></div>
    <div class="mainright"></div>
</div>


</body>
</html>

 

posted @ 2015-05-07 09:53  Shimily  阅读(253)  评论(0)    收藏  举报