The first method: float
<style> *{ padding:0; margin:0; } . Big div{ height:100px; } . Big. left{ width:300px; Float:left; background:red; } . Big. right{ width:300px; Float:right; Background:yellow; } . Big. center{ background:blue; } </style><body><div class= "Big" > <div class= "left" > </div> <div Class= "Right" > </div> <div class= "center" > Floating Solutions </div></div>The first solution basically does not have any difficulty, usually should also use many!
The second method: absolute positioning
<style>
. position{
margin-top:10px;
}
. position>div{
Position:absolute;
height:100px;
}
. position. left{
left:0;
width:300px;
background:red;
}
. position. right{
right:0;
width:300px;
Background:yellow;
}
. position. center{
left:300px;
right:300px;
Background:blue;
}
</style>
<body>
<div class= "Position" >
<div class= "Left" >
</div>
<div class= "Right" >
</div>
<div class= "center" >
Absolute Positioning Scheme 2
</div>
</div>
</body>
The second method is also easy to achieve results.
Method Three: Flexbox
<style>. flex{ margin-top:120px; Display:flex; } . flex>p{ height:100px; } . Flex. left{ width:300px; background:red; } . Flex. center{ flex:1; Background:blue; } . Flex. right{ width:300px; Background:yellow; } </style><body><p class= "Flex" > <p class= "left" > </p> <p class= " Center > Flex Solutions </p> <p class= "right" > </p></p></body>Fourth method: Table layout
<style>. Table{Margin-top:10px;width:100%;Display:Table;Height:100px; }. Table>p{Display:Table-cell; }. table. Left{width:300px;background:Red; }. Table. Center{background:Blue; }. table. Right{width:300px;background:Yellow; }</style>
<Body><Pclass= "Table"> <Pclass= "Left"> </P> <Pclass= "Center">Table Scenario</P> <Pclass= "Right"> </P></P></Body>
The table scheme is also implemented, but now we may have rarely used table layouts.
Fifth method: Grid layout grid
<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><p class= "Grid" > <p class= "left" > </p> <p class= " Center > Grid Solutions </p> <p class= "right" > </p></p></body>The grid layout method is also implemented, and the CSS3 grid layout is somewhat similar to the bootstrap grid layout, which divides the chunks of elements in a grid way.
The question is not over, we continue our discussion. Five solutions which is better? The author always thinks that technology is not good or bad, it depends entirely on where you use it.
Personal opinion of the advantages and disadvantages of the five methods:
1. Floating: Good compatibility, if the compatibility has a clear requirement to use the float should meet the needs, but must deal with the surrounding elements of the relationship, because one does not pay attention to the floating may cause the page layout confusion and other problems, but to solve the problem of floating side effects are not many here we do not discuss.
2. Absolute positioning: simple and straightforward, but will leave the parent element out of the normal document flow, the child elements will also follow the separation.
3.flex: It seems perfect at the moment, but now a little bit more perfect technology has more or less compatibility issues, the same style IE8 is not supported! (ie Ah!) ）
4. Table layout: Table layout Although there is no big problem, but when we want to refine the structure will be very cumbersome, and the table layout of the height of the three cells will be changed together is not conducive to our layout.
5. Grid layout: The code is elegant and concise, but it is still a compatibility issue. But the future is beautiful!
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
