Assuming that the height is known and the width of the left and right is fixed, five three-column layout methods and five layout methods are implemented.
As the saying goes, the good memory is not as good as the bad pen, and the same principle is true for writing code. It will take a long time to read things without writing them again. So I have been working for so long and gradually moved the previously recorded knowledge to share, and to better summarize it! Well, let's not talk much about it.
Method 1: float
1 <style> 2*{3 padding: 0; 4 margin: 0; 5} 6. big div {7 height: 100px; 8} 9. big. left {10 width: 300px; 11 float: left; 12 background: red; 13} 14. big. right {15 width: 300px; 16 float: right; 17 background: yellow; 18} 19. big. center {20 background: blue; 21} 22 </style>
23 <body> 24 <div class = "big"> 26 <div class = "left"> 27 28 </div> 29 <div class = "right"> 30 31 </div> 32 <div class = "center"> 33 floating solution 34 </div> 36 </div>
The first solution is basically not difficult. It should be used a lot at ordinary times!
Method 2: absolute positioning
1 <style> 2. position {3 margin-top: 10px; 4} 5. position> div {6 position: absolute; 7 height: 100px; 8} 9. position. left {10 left: 0; 11 width: 300px; 12 background: red; 13} 14. position. right {15 right: 0; 16 width: 300px; 17 background: yellow; 18} 19. position. center {20 left: 300px; 21 right: 300px; 22 background: blue; 23} 24 </style>
25 <body> 26 <div class = "position"> 27 <div class = "left"> 28 29 </div> 30 <div class = "right"> 31 32 </div> 33 <div class = "center"> 34 absolute Positioning Solution 235 </div> 36 </div> 37 </body>
The second method is easy to implement.
Method 3: flexbox
<Style>. flex {margin-top: 120px; display: flex ;}. flex> div {height: 100px ;}. flex. left {width: 300px; background: red ;}. flex. center {flex: 1; background: blue ;}. flex. right {width: 300px; background: yellow ;} </style> <body> <div class = "flex"> <div class = "left"> </div> <div class = "center"> flex solution </div> <div class = "right"> </div> </body>
Method 4: table layout
<Style>. table {margin-top: 10px; width: 100%; display: table; height: 100px ;}. table> div {display: table-cell ;}. table. left {width: 300px; background: red ;}. table. center {background: blue ;}. table. right {width: 300px; background: yellow ;}</style>
<Body> <div class = "table"> <div class = "left"> </div> <div class = "center"> table solution </div> <div class = "right"> </div> </body>
The table scheme is also implemented, but table layout is rarely used now.
Method 5: grid layout
<Style>. grid {margin-top: 10px; display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px ;}. grid. left {background: red ;}. grid. center {background: blue ;}. grid. right {background: yellow ;} </style> <body> <div class = "grid"> <div class = "left"> </div> <div class = "center"> grid solution </div> <div class = "right"> </div> </body>
The grid layout method is also implemented. The grid layout of CSS3 is a bit similar to the raster layout of bootstrap. It uses a grid to divide blocks occupied by elements.
The problem is not over. Let's continue. Which of the five solutions is better? I have always thought that there is no good or bad technology. It depends entirely on where you use it.
I personally think the advantages and disadvantages of the five methods:
1. floating: good compatibility. If there are clear requirements on compatibility, floating should meet the requirements, but the relationship with peripheral elements must be well handled, if you don't pay attention to floating, the page layout may be messy. However, we will not discuss the side effects of floating.
2. Absolute positioning: simple and direct, but the sub-elements in the parent element will be removed from the normal document stream.
3. flex: It seems to be perfect at present, but there are more or less compatibility problems in technologies that are more perfect now, which is not supported in IE8! (IE !)
4. table layout: although there are no major issues with table layout, it is very cumbersome to refine the structure, at the same time, the height of the three cells in the table layout will change, which is not conducive to layout.
5. grid layout: the code is elegant and concise, but it is still compatible. But the future is beautiful!
Okay, I am writing it here for now. Of course, there must be other methods for layout. If there is a better method, we can discuss it together!
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
