学了前端挺久了,最近写一个项目测试系统,布局时发现自己对变宽+固宽的布局还没有完全掌握,所以在这里总结一下,以后需要的时候回头看看。
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;
CSS布局篇——固宽、变宽、固宽+变宽,布布扣,bubuko.com
时间: 2024-10-01 03:42:48