CSS布局小技巧

05-22

CSS布局小技巧

1.左右布局

一般用float（浮動就能做到），左右模塊各自向左右浮動（記：需在浮動元素得父級元素添加清除浮動才不會使整體布局發生變化）

<!DOCTYPE html><html lang="en"><head> <style> .clearfix::after{ content: ; display: block; clear: both; } .left { float: left; height: 100px; width: 100px; background-color: #000; } .right { width: 100px; height: 100px; background-color: #000; float: right; } </style></head><body> <div class="container clearfix"> <div class="left"></div> <div class="right"></div> </div></body></html>

2.左中右布局

與左右布局大致相同，在中間加入main區域使其自適應就行

<!DOCTYPE html><html lang="en"><head> <style> .left { float: left; height: 200px; width: 200px; background-color: red; } .right { width: 200px; height: 200px; background-color: blue; float: right; } .main { margin-left: 220px; margin-right: 220px; height: 200px; background-color: green; } </style></head><body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div></body></html>

3.水平居中

這裡就要運用到display: inline-block

在塊級父容器中讓行內元素或者類行內元素居中，只需使用 text-align: center，

這種方法可以讓 inline/inline-block/inline-table/inline/flex 居中。

.child { display:inline-block; /*子元素文字會繼承居中，因此要在上面寫上向左邊居中*/ text-align:left;}.parent { text-align:center;}

當有多個 child div 的時候如果設置 display: inline-block 的時候需要注意每個 div 之間會有縫隙，需要去除原有的縫隙，再自己添加間距。

4.垂直居中

display: table-cell

可以使高度不同的元素都垂直居中

.parent { display:table-cell; vertical-align:middle;}

當然也可以用

position：relative;

(記：父級元素要定義絕對定位，不然會改變整體布局)

.parent { position:absolute；}.child{ ; position:relative； top:50% transform: translateY(-50%);}

5.其他小技巧

運用position定位脫離文檔流，可以自己設置top和left的值，使其達到各種居中效果，但需在外面加入新的塊級元素來控制布局，不然會影響接下來的頁面局部。