CSS布局篇——固宽、变宽、固宽+变宽
来源:互联网 发布:java 多线程是什么 编辑:程序博客网 时间:2024/04/29 19:22
学了前端挺久了,最近写一个项目测试系统,布局时发现自己对变宽+固宽的布局还没有完全掌握,所以在这里总结一下,以后需要的时候回头看看。
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%
飞试测试过,是可行的,感谢这位朋友宅回复~~~也同样欢迎亲们回复更多布局方法,大家互相学习互相进步哦。
- CSS布局篇——固宽、变宽、固宽+变宽
- 一个div 缓冲运动—变宽
- 多个div 缓冲运动—变宽
- storyboard变宽
- 两侧列固定中间列变宽Div布局参考
- 多个div变宽
- 物体变宽变高
- 拖拽改变宽高
- 任务栏变宽后咋恢复?
- 变绿变宽变高
- CSS技巧,CSS设置任何元素宽度随内容增加自动变宽
- Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码,让你轻松了解运动的原理
- JQuery插件第三十四个 : div左右变宽
- css3 resize自由缩放,改变宽高
- 利用属性动画将Button变宽
- JavaScript 动画之多个div同时变宽
- [cnblogs镜像]页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放
- Word中插入公式后行距变宽的解决
- SGU 200. Cracking RSA(高斯消元+高精度)
- Android 通知栏Notification的整合 全面学习 (一个DEMO让你完全了解它)
- UVa 225 - Golygons 解题报告(暴力)
- 使用Axure图片放大缩小,渐进效果
- 屏幕适配
- CSS布局篇——固宽、变宽、固宽+变宽
- c++和java(c#)之间的pk
- hdu 4893 Wow! Such Sequence!
- URL地址中的#符号
- DOM解析的基本操作
- java dom tree
- 暑期个人赛--第八场--A
- 进程.线程,内核线程创建的区别
- Java代理