<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
h2{ width:980px; margin:0 auto;}
.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;}

.main4{ margin:10px auto;}
.main4 .mainleft,.mainright{width:200px;height:300px; }
.main4 .mainleft{float:left; background:#009933;}
.main4 .mainright{ float:right; background:#000000;}
.main4 .maincenter{background:#F60; height:300px;}


.main5{ margin:10px auto;}
.main5 .right,.left{width:200px;height:300px;}
.main5 .left{ float:left; background:#009933;}
.main5 .right{ float:right; background:#000000;}
.main5 .main{background:#F60; height:300px;}

</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> -->


<h2>三栏：</h2>

<div class="main4 clearfix">
    <div class="mainleft">111</div>
    <div class="mainright">22</div>
    <div class="maincenter">333</div>
</div>

<div class="main5 clearfix">
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
    <div class="main">MAIN</div>    
</div>
</body>
</html>

 

给心灵一个纯净空间，让思想，情感，飞扬！