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

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;

同樣，如果是左固寬，右變寬也是一個道理。

另外有道友回複中提到另外一種方式：

就是<1>前兩步和我的相同<2>side設定float: left，而wrap_content只設定margin-left: 300px <3>content設定為width:100%

飛試測試過，是可行的，感謝這位朋友宅回複~~~也同樣歡迎親們回複更多布局方法，大家互相學習互相進步哦。

css實現變寬布局的問題

就像你說的那樣了，大概就是這麼回事。
但是也是和瀏覽器有關，我用2345瀏覽器試了試，不寫margin-left:300px; 它也能“頂上去”。
這有時是要看瀏覽器的情況，但是寫上是最好的，大概寫上時，多數的瀏覽器都應該是一個效果吧。
 
div ,css布局網頁時，變寬，寬度不固定的話，背景怎確定尺寸

設定為100%的形式