學了前端挺久了,最近寫一個項目測試系統,佈局時發現自己對變寬+固寬的佈局還沒有完全掌握,所以在這裏總結一下,以後需要的時候回頭看看。
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%
飛試測試過,是可行的,感謝這位朋友宅回覆~~~也同樣歡迎親們回覆更多佈局方法,大家互相學習互相進步哦。