码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-30 20:53:44      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:html布局   css布局   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内再设置一个div contentmargin-right: 300px;

bubuko.com,布布扣

CSS布局篇——固宽、变宽、固宽+变宽,布布扣,bubuko.com

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

标签:html布局   css布局   css布局变宽+固宽   

原文地址:http://blog.csdn.net/u014761420/article/details/38304647

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!