CSS布局篇——固寬、變寬、固寬+變寬

標籤：html布局   css布局   css布局變寬+固寬   

學了前端挺久了，最近寫一個項目測試系統，布局時發現自己對變寬+固寬的布局還沒有完全掌握，所以在這裡總結一下，以後需要的時候回頭看看。

1.最簡單的當然是一列或多列固寬

例如兩列固寬：

1.設定一個外圍div——container，是兩列顯示的總大小，可以是固定800px等值。

2.在container內分別設定兩個div——side、content

根據需要設定像素，比如一個是300px，另一個是500px；

分別設定float:left;

2.兩列變寬，同1，只不過將像素改為百分比，例如是一個30%，另一個70%

3.重點來啦，兩列或多列中有固寬，有變寬——典型的是一列左固寬，一列右變寬

1.設定一個外圍div——container，是兩列顯示的總大小，可以是固定800px等值。

2.在container內分別設定兩個div——side、wrap_content

根據需要設定寬度，比如一個是width:300px，另一個是width: 100%;

margin-right: -300px;

3.分別設定float: left;

4.在wrap_content內再設定一個div：content，margin-right: 300px;