博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS布局篇——固宽、变宽、固宽+变宽
阅读量:7240 次
发布时间:2019-06-29

本文共 727 字,大约阅读时间需要 2 分钟。

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

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%

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

你可能感兴趣的文章
看完这篇让你对各种前端build工具不再懵逼!
查看>>
精通移动端布局
查看>>
怎么运行 ASP.NET Core控制台程序
查看>>
IOS蓝牙项目总结
查看>>
django一对多 增 删 改 查
查看>>
Sqoop Export原理和详细流程讲解
查看>>
浅谈对java中锁的理解
查看>>
ASP.NET Core MVC之ViewComponents(视图组件)知多少?
查看>>
在天河二号上对比Julia,Python和R语言
查看>>
Docker容器学习梳理--私有仓库Registry使用
查看>>
arcgis地图服务之 identify 服务
查看>>
取汉子拼音首字母的C#方法
查看>>
C语言 · 求先序遍历
查看>>
java oracle thin 和 oci 连接方式实现多数据库的故障切换
查看>>
使用spring利用HandlerExceptionResolver实现全局异常捕获
查看>>
字符串 上
查看>>
jmeter设置全局变量
查看>>
MySQLi基于面向对象的编程
查看>>
CAAnimation 动画支撑系统
查看>>
读vue-0.6-text-parser.js源码
查看>>