Home > Developer > Web Develop
1. Two-column adaptive
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>demo</title>
<style type= "text/css" media= "screen" >
#left {float:left;background: #ccc; height:400px;width:400px;}
#right {background:green;height:400px;position:absolute;left:400px;right:0;}
</style>
<body>
<div id= "left" ></div>
<div id= "right" >11111<br>11111<br>11111<br>11111<br>11111<br></div>
</body>
2. Three-column middle fixed left and right adaptive
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{margin:0;padding:0;}
#left {height:300px;background:orange;float:left;width:50%;p osition:relative;margin-left: -150px;}
#right {height:300px;background:orange;float:right;width:50%;margin-left: -150px;}
#center {width:300px;height:300px;background:green;float:left;position:relative;}
</style>
<body>
<div id= "Left" >
</div>
<div id= "center" >
</div>
<div id= "Right" >
</div>
</body>
3. Three column middle adaptive, left and right fixed
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{margin:0;padding:0;}
#left {width:300px;height:300px;float:left;background:green;}
#right {height:300px;background:green;width:300px;float:right;}
#center {height:300px;margin:0 300px;background: #ccc;}
</style>
<body>
<div id= "Left" >
</div>
<div id= "Right" >
</div>
<div id= "center" >
</div>
</body>
Each adaptive write a program, Welcome to add!
------------------------------------------------------------------------------
Sweat! Do not allow 150 words to be published, then I will write another about three columns around fixed, the middle adaptive layout
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style>
*{margin:0;padding:0;}
#left {width:300px;height:300px;position:absolute;left:0;background:green;}
#right {height:300px;background:green;width:300px;position:absolute;right:0;}
#center {height:300px;margin:0 300px;background: #ccc;}
</style>
<body>
<div id= "Left" >
</div>
<div id= "Right" >
</div>
<div id= "center" >
</div>
</body>
CSS Adaptive layout (two-column adaptive layout + three-column fixed-center-adaptive + three-column middle-fixed left-right adaptive)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
