学了前端挺久了。近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看。

1.最简单的当然是一列或多列固宽

比如两列固宽:

<1>.设置一个外围div——container。是两列显示的总大小,能够是固定800px等值。

<2>.在container内分别设置两个div——side、content

依据须要设置像素,比方一个是300px,还有一个是500px;

分别设置float:left;

,仅仅只是将像素改为百分比,比如是一个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;

CSS布局篇——固宽、变宽、固宽+变宽-LMLPHP

相同,假设是左固宽,右变宽也是一个道理。

另外有道友回复中提到第二种方式:

就是<1>前两步和我的同样<2>side设置float: left,而wrap_content仅仅设置margin-left: 300px <3>content设置为width:100%

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

05-18 05:43