Home > Developer > Web Develop
Automatic Layout of the middle elements in the vertical three columns and vertical layout of the width of the three columns
1. The most common vertical three-column layoutHtml code:
<Body> <div id = ""> <div class = "left_div"> left </div> <div class = "mid_div"> currently you can see this code on the old site, it effectively solves floating problems. However, there is a fatal flaw in this usage, that is, an empty label should be added each time the floating is cleared. If the Complex layout of a page needs to be clear and floating frequently, many empty labels will be generated, and useless page labels will be added, which is not conducive to page optimization. However, I found that large websites still use this clear Floating Method. If you are interested, you can search for the style name ". blank0" on the homepage. </Div> <div class = "right_div"> right </div> </body><Style>/* name: zhiqiang21 date: 2015-05 des: center of three vertical columns, middle div adaptive */body {margin: 0; padding: 0 ;} # body_main {margin: 0 auto; width: 1280px; height: 768px; background-color: #3091E5; position: relative ;}. left_div {width: 200px; height: 300px; position: absolute; background-color: # 374e0c; border: 1px solid # ff0000; top: 0; left: 0; margin-left: 200px ;}. mid_div {margin: 0px pixel 0px pixel PX; background-color: #88E500; height: 300px ;}. right_div {width: 200px; height: 300px; position: absolute; background-color: # 374e0c; border: 1px solid # ff0000; right: 0; top: 0; margin-right: 200px ;}</style>The main implementation principle is that the default width of the div is 100%. When absolute positioning is used to locate the div between the left and right sides, use the margin attribute to set the outer border of the div. The width of the div is still full to remove the margin value on both sides of the left and right.
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
