当前位置: 首页 > news >正文

css学习_css布局案例

1、中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽)

2、中间栏自适应   width:100%

3、左右栏固定宽  

左中右  浮动  (本来应该在一行显示的,但是中间栏宽100% ,所以左右会掉下来,此时就需要设置margin-left)

左margin-left:-100%

右 margin-left:  200px(自身宽)

父元素设置padding: 0  200px  (父元素不能右宽100%,保证左右留200给左右栏)

 左边栏:position   :relative   ;left : -200px 

右边栏:position   :relative   ;right:  -200px    

给父元素容器加最小宽度   min-width: 400px

 

方法二:

在一的基础上优化代码

 

!!!此时可以去掉左右栏的定位,去掉父元素的padding,给中间栏的容器加margin  : 0  200px  这样中间栏就不会有空间被左右栏遮挡住了

 方法三:

  

 

转载于:https://www.cnblogs.com/yangyutian/p/10747789.html

相关文章:

  • jsp简单介绍
  • python inspect模块
  • 通过SQL脚本来查询SQLServer 中主外键关系
  • python的pandas库学习笔记
  • 最全的前端模块化方案
  • 深入浅出了解“装箱与拆箱”
  • 力扣算法题—091解码
  • 如何利用在线画图网站绘制流程图
  • 软件原型设计工具Axure
  • 数据脱敏(一)--基础知识
  • linux-高并发与负载均衡-lvs-DR模型试验
  • Guns 旗舰版 2.4 发布,更简洁的管理系统
  • JAVA中AWT编程
  • swoft| 源码解读系列一: 好难! swoft demo 都跑不起来怎么破? docker 了解一下呗~
  • Kubernetes单机部署操作学习
  • 2018以太坊智能合约编程语言solidity的最佳IDEs
  • Angular4 模板式表单用法以及验证
  • fetch 从初识到应用
  • IP路由与转发
  • Java多线程(4):使用线程池执行定时任务
  • Laravel5.4 Queues队列学习
  • Spring-boot 启动时碰到的错误
  • 从0搭建SpringBoot的HelloWorld -- Java版本
  • 聚簇索引和非聚簇索引
  • 排序(1):冒泡排序
  • 从如何停掉 Promise 链说起
  • ​【已解决】npm install​卡主不动的情况
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • #、%和$符号在OGNL表达式中经常出现
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (day 12)JavaScript学习笔记(数组3)
  • (第9篇)大数据的的超级应用——数据挖掘-推荐系统
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (四) Graphivz 颜色选择
  • .Net FrameWork总结
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .NET大文件上传知识整理
  • .Net下的签名与混淆
  • .Net中间语言BeforeFieldInit
  • [ 转载 ] SharePoint 资料
  • [AutoSar]工程中的cpuload陷阱(三)测试
  • [BUUCTF]-PWN:[极客大挑战 2019]Not Bad解析
  • [C#]C# winform实现imagecaption图像生成描述图文描述生成
  • [C++核心编程](四):类和对象——封装
  • [dfs] 图案计数
  • [ERROR] ocp-server-ce-py_script_start_check-4.2.1 RuntimeError: ‘tenant_name‘
  • [IE编程] IE中对网页进行截图的编程接口
  • [java面试]宇信易诚 广州分公司 java笔试题目回忆录
  • [leetcode 189][轮转数组]
  • [luogu P1527]矩阵乘法(矩形k小)
  • [Oh My C++ Diary]operator++()和operator++(int)的区别
  • [poj2891]Strange Way to Express Integers(扩展中国剩余定理)
  • [PTP][1588v2] Follow_Up消息
  • [Pytorch] pytorch笔记 三