Home > Developer > Web Develop
One, two column layout (left width, right automatic)
1. Float + margin
That is, the fixed-width element sets the float property to left, the adaptive element sets the margin property, and the Margin-left should >= the width of the fixed width element.
Example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
margin:10px;
}
. wrap_left{
Float:left;
width:200px;
background-color:red;
}
. wrap_right{
margin-left:220px;
Background-color:green;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</div>
</body>
2.position + margin
That is, the Position property is set to relative in the parent tag, the Position property is absolute in the child label, and the adaptive element sets the margin property, margin-left>= the width of the fixed width element.
Example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
margin:10px;
position:relative;
}
. wrap_left{
Position:absolute;
width:200px;
background-color:red;
}
. wrap_right{
margin-left:220px;
Background-color:green;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</div>
</body>
3.float + negative margin
That is, define a parent label for the adaptive width element, and set the float property to Left;width to 100%, and the adaptive width element setting margin,margin-left should >= the width of the fixed width element;
Fixed-width elements set the Margin-left property to a negative value:-100%;
In addition, you should note that the HTML structure should first write the adaptive elements, and then write fixed-width elements.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
Float:left;
width:100%;
}
. Wrap. wrap_right{
margin-left:220px;
Background-color:green;
}
. wrap_left{
Float:left;
width:200px;
Margin-left:-100%;
background-color:red;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_right" >
I'm in the right column.
</div>
</div>
<div class= "Wrap_left" >
I'm the left column.
</div>
</body>
Note: Use the Float property to clear the float if necessary.
4. Implement <! with table layout DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,table{
margin:0;
padding:0;
}
</style>
<body>
<table width= "100%" cellspacing= "0" cellpadding= "0" border= "1" height= ">"
<tr>
<TD width= "$" bgcolor= "Red" ></td>
<TD bgcolor= "Green" ></td>
</tr>
</table>
</body>
Note : When using a table, be sure to set the height to
5. Trigger BFC Implementation
As to what BFC is, how to trigger BFC and what BFC can do, you can look at this article,
The implementation method is to set the Float:left for the fixed-width element, and the adaptive width element setting can trigger the BFC's properties.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap_left{
Float:left;
width:200px;
background-color:red;
}
. wrap_right{
Overflow:hidden;
Background-color:green;
}
</style>
<body>
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</body>
6.flex Telescopic Box method
That is, the parent tag sets the Display:flex property, the adaptive element setting flex-grow:1;
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> two column layout-Zoding width, right auto </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
Display:flex;
Display:-webkit-flex;
}
. wrap_left{
width:200px;
background-color:red;
}
. wrap_right{
Flex-grow:1;
-webkit-flex-grow:1;
Background-color:green;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</div>
</body>
Two or three column layout
Having mastered the above method, we will find it very easy to make a three-column layout.
Below we are on the basis of chestnuts above, to see how to achieve a fixed width on both sides, the middle adaptive three-column layout how to achieve
1. Float + margin (fixed width on both sides, middle adaptive)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, middle adaptive </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap_left{
width:200px;
Float:left;
background-color:red;
}
. wrap_content{
margin-left:220px;
margin-right:220px;
Background-color:yellow;
}
. wrap_right{
width:200px;
Float:right;
Background-color:green;
}
</style>
<body>
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
<div class= "Wrap_content" >
I'm the middle column.
</div>
</body>
2. Position + margin (fixed width on both sides, middle adaptive)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, middle adaptive </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap_left{
width:200px;
Position:absolute;
background-color:red;
left:0;
}
. wrap_content{
margin-left:220px;
margin-right:220px;
Background-color:yellow;
}
. wrap_right{
width:200px;
Position:absolute;
right:0;
Background-color:green;
}
</style>
<body>
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
<div class= "Wrap_content" >
I'm the middle column.
</div>
</body>
3.float + negative margin (fixed width on both sides, middle adaptive)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, middle adaptive </title>
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
Float:left;;
width:100%;
}
. wrap_left{
width:200px;
Float:left;
Margin-left:-100%;
background-color:red;
}
. wrap_content{
margin-left:220px;
margin-right:220px;
Background-color:yellow;
}
. wrap_right{
width:200px;
Float:left;
Margin-left: -200px;
Background-color:green;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_content" >
I'm the middle column.
</div>
</div>
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</body>
4.table implementations
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, automatic </title> in the middle
<style type= "Text/css" >
html,body,table{
margin:0;
padding:0;
}
</style>
<body>
<table width= "100%" cellspacing= "0" cellpadding= "0" border= "1" height= ">"
<tr>
<TD width= "$" bgcolor= "Red" ></td>
<TD bgcolor= "Yellow" ></td>
<TD width= "$" bgcolor= "green" ></td>
</tr>
</table>
</body>
5.BFC method
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, automatic </title> in the middle
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap_left{
Float:left;
width:200px;
background-color:red;
}
. wrap_right{
Float:right;
width:200px;
Background-color:green;
}
. wrap_content{
Overflow:hidden;
Background-color:yellow;
}
</style>
<body>
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
<div class= "Wrap_content" >
I'm the middle column.
</div>
</body>
Note : The HTML first writes the width element, and then writes the adaptive width element.
6.flex Telescopic Box
That is, the parent tag sets the Display:flex property, the adaptive element setting flex-grow:1;
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> three-column layout-fixed width on both sides, automatic </title> in the middle
<style type= "Text/css" >
html,body,div{
margin:0;
padding:0;
}
. wrap{
Display:flex;
Display:-webkit-flex;
}
. wrap_left{
width:200px;
background-color:red;
}
. wrap_right{
width:200px;
Background-color:green;
}
. wrap_content{
Flex-grow:1;
-webkit-flex-grow:1;
Background-color:yellow;
}
</style>
<body>
<div class= "Wrap" >
<div class= "Wrap_left" >
I'm the left column.
</div>
<div class= "Wrap_content" >
I'm the middle column.
</div>
<div class= "Wrap_right" >
I'm in the right column.
</div>
</div>
</body>
Div+css Layout Adaptive Summary
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
