<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>xia</title>
<link rel= "stylesheet" href= "Http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src= "Http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src= "Http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<link href= "P.css" rel= "stylesheet" >
<style type= "Text/css" >
. container {
padding:0 300px 0 200px;
}
. Left,. Main,. Right {
position:relative;
min-height:130px;
Float:left;
}
. Left {
Left: -200px;
Margin-left:-100%;
Background:green;
width:200px;
}
. Right {
Right: -300px;
Margin-left: -300px;
background-color:red;
width:300px;
}
. Main {
Background-color:blue;
width:100%;
}
</style>
<body>
<div class= "Container" >
<div class= "main" >main</div>
<div class= "left" >left</div>
<div class= "right" >right</div>
</div>
</body>
Classic Grail layout