One div Center
# Container {margin: 0 auto ;}
Margin: 1px 2px 3px 4px; the four values represent the top right bottom left (clockwise)
Margin: 1px 2px; 1px indicates the distance from the browser's top and bottom, and 2px indicates the distance from the left and right respectively.
Margin: 0 auto; 0 indicates the distance from the upper and lower, and auto indicates the distance from the left and right. When the left and right distance is auto, the browser automatically calculates the same left and right distance.
2. Absolute Positioning
When a div is set to position: absolute, it is essentially separated from other objects. Its positioning mode does not affect other objects or be affected by other objects.
# Sample {
Postion: absolute;
Left: 0;
}
The distance from the left side is 0 PX.
Example:
# Left {
Postion: absolute;
Left: 0;
Width: 200px;
}
# Center {
Margin-left: 200px;
Margin-right: 200px;
}
# Right {
Postion: absolute;
Right: 0;
Width: 200px;
}
In this way, the left and right sides are two divs with fixed width. The middle div is px from the left and right sides of the browser respectively, leaving the right and right div width position, and the middle div width is adaptive.
Three-height adaptive
Some people think it is very simple to directly set the height: 100%, but this is not enough.
It must be understood that whether an object's height is adaptive depends on whether its parent object is highly adaptive.
Example 1:
<Html>
<Body>
<Div id = "content"> </div>
</Body>
</Html>
To make the content div highly adaptive, you must set it in this way.
Html, body {height: 100% ;}
# Content {height: 100% ;}
Example 2:
<Html>
<Body>
<Div id = "content">
<Div id = "left"> </div>
</Div>
</Body>
</Html>
To make the left div highly adaptive, you must set it in this way.
Html, body {height: 100% ;}
# Content {height: 100% ;}
# Left {height: 100% ;}
That is to say, to set the left highly adaptive, the object's parent object content must be set to highly adaptive.
To set highly adaptive content, you must also set the height adaptive of the parent object.
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
