CSS布局篇——固宽、变宽、固宽+变宽
2024-08-23 11:24:05
学了前端挺久了。近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看。
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;
相同,假设是左固宽,右变宽也是一个道理。
另外有道友回复中提到第二种方式:
就是<1>前两步和我的同样<2>side设置float: left,而wrap_content仅仅设置margin-left: 300px <3>content设置为width:100%
飞试測试过,是可行的。感谢这位朋友宅回复~~~也相同欢迎亲们回复很多其它布局方法,大家互相学习互相进步哦。
最新文章
- 如何dos命令打开服务窗口?
- 看懂mysql执行计划--官方文档
- .net中c#获取本机IP地址实例代码
- FluentData(微型ORM)
- POJ1466 Girls and Boys(二分图最大点独立集)
- 函数xdes_get_offset
- Markdown 添加 Latex 数学公式
- 1、shell 简介
- python每次处理一个字符的三种方法
- 图片浏览 h5
- anaconda安装第三方库
- Mysql导入大文件报错(MySQL server has gone away(error 2006))
- linux 安装虚拟机
- angular应用容器化部署
- Taro项目遇到的问题
- 二.django项目环境搭建
- 如何让.net程序支持TLS1.2
- [转帖]一个ip对应多个域名多个ssl证书配置-Nginx实现多域名证书HTTPS
- 数组和list互转
- WPF SourceInitialized 事件
热门文章
- [TJOI2017]城市(树的直径)
- 【Codeforces Round #420 (Div. 2) B】Okabe and Banana Trees
- 华为:一张图看懂 HBase
- 最全面的AndroidStudio配置指南总结-包括护眼模式
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
- WAS集群系列(5):集群搭建:步骤3:安装IHS软件
- 目标跟踪--CamShift
- 让透明div里的文字不透明
- 2.CString转换到char*
- 2015北京网络赛 Couple Trees 倍增算法