浮動布局
分為三個div，另外一個父級包含這三個div，使用float，
注意點：三個div，left --> right ---> center 這種順序
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { margin: 0; padding: 0; } .left { float: left; width: 300px; height: 100px; background-color: red; } .right { float: right; width: 300px; height: 100px; background-color: blue; } .center { margin: 0px 300px 0px 300px; background-color: black; height: 100px; } </style> </head> <body> <div class="father"> <div class="left">1</div> <div class="right">2</div> <div class="center">3</div> </div> </body> </html>
Flex
設定中間盒子FLex：1，這樣的話就可以實現自適應，預設水平排列
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">.father { display: flex;}.left { width: 300px; height: 100px; background-color: red;}.center { flex:1; height: 100px; background-color: black;}.right { width: 300px; height: 100px; background-color: blue;}</style></head><body><div class="father"><div class="left"></div><div class="center"></div><div class="right"></div></div> </body></html>
flex相關知識點，一般會使用到的
1、設定display：flex
2、容器圖：
軸：水平main axis和垂直cross axis
3、容器的屬性
flex-direction：主軸的方向，row | row-reverse | column | column-reverse;
flex-wrap：換行， nowrap | wrap | wrap-reverse;
flex-flow：flex-direction和flex-wrap簡寫
justify-content：主軸上的對齊， flex-start | flex-end | center | space-between | space-around；
align-items：交叉軸上如何對齊，flex-start | flex-end | center | baseline | stretch;
絕對位置對齊
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">.one { background-color: red; position: absolute; left: 0; width: 300px; height: 100px;}.two { left: 300px; right: 300px; background-color: blue; position: absolute; height: 100px;}.three { right: 0px; width: 300px; background-color: yellow; position: absolute; height: 100px;}</style></head><body><div class="father"><div class="one">1</div><div class="two">1</div><div class="three">1</div></div> </body></html>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
