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%


飞试测试过,是可行的,感谢这位朋友宅回复~~~也同样欢迎亲们回复更多布局方法,大家互相学习互相进步哦。

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