博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div布局方案整理
阅读量:6981 次
发布时间:2019-06-27

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

实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案

1 左侧 DIV 设置 float 属性为 left,右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

   
Insert title here

 

实际效果: 

这里写图片描述

2 左侧 DIV 设置 float 属性为 left,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

   
Insert title here

 

实际效果: 

这里写图片描述

3 如果将需求修改为右侧固定宽度而左侧自适应宽度

   
Insert title here

 

实际效果: 

这里写图片描述

转载于:https://www.cnblogs.com/chenlimei/p/9283110.html

你可能感兴趣的文章
polymer中的notify和reflectToAttribute
查看>>
Java排序二叉树
查看>>
从其他机构转投乾颐堂的同学pass感言
查看>>
卷积神经网络CNN原理以及TensorFlow实现
查看>>
教程:怎样处理资源管理器崩溃退出的问题
查看>>
JavaScript和jquery分别实现简单的跑马灯效果
查看>>
缓存涉及的http头,虽然很多不懂但是我也粘出来,希望大家帮我一想分析
查看>>
调试 Dockerfile - 每天5分钟玩转 Docker 容器技术(15)
查看>>
我的友情链接
查看>>
Oracle计算时间跨度的函数
查看>>
python进程之间消息监控程序
查看>>
Abset Line Number Information
查看>>
设置grub密码
查看>>
去除文件中<feff>
查看>>
我的学习计划 2015
查看>>
MySQL中 TIMESTAMP类型 和 DATETIME类型 的区别
查看>>
spring管理用hibernate连接informix 数据库
查看>>
jquery通过多个属性选择器过滤
查看>>
Fedora 11 安装指南-12
查看>>
2011年10款最佳Linux桌面
查看>>