Two-column div width adaptive:
recommendation : As far as possible handwriting code, can effectively improve the learning efficiency and depth.
The previous tutorial has introduced a column of div width adaptive . The main way to achieve the adaptive effect is to set the object's Width property value to a percentage.
code example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">. Left{width:30%;Height:50px;Background-color:Green;float: Left;}. Right{width:70%;Height:50px;Background-color:Blue;float: Left;}</style></Head><Body><Divclass= "Left">I'm on the left.</Div><Divclass= "Right">I'm on the right.</Div></Body></HTML>
The above code uses a percentage to set the width of two parallel div to two column div width adaptive. In the effect of the above code settings, regardless of resizing the window, the two div occupy the width of Windows 30% and 70% respectively.
The above code in the actual use of the problem often exists. For example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">. Left{width:30%;Height:50px;Background-color:Green;float: Left;}. Right{width:70%;Height:50px;Background-color:Blue;float: Left;}</style></Head><Body><Divclass= "Left">I'm on the left.</Div><Divclass= "Right">I'm on the right.</Div></Body></HTML>
Run the above code to see that two div wraps. This is because the actual occupied width of the object is not only determined by the width property, but also the margin, border width, and padding affect the actual occupied width of an object. So when the two div width 30% and 70% in the above code is exactly a window width, then the width of the border exceeds the width of the window, resulting in a newline. Clicking on The View box model will help you understand the above code.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4768
For more information, refer to: http://www.softwhy.com/divcss/
Two-column div width 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
