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

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

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

例如兩列固寬:

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

<2>.container內分別設置兩個div——sidecontent

根據需要設置像素,比如一個是300px,另一個是500px

分別設置float:left;

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

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

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

<2>.container內分別設置兩個div——sidewrap_content

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

margin-right: -300px;

<3>.分別設置float: left;

<4>.wrap_content內再設置一個divcontentmargin-right: 300px;

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


另外有道友回覆中提到另外一種方式:

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


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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章