DIV 左右布局方案

本文内容大多基于官方文档和网上前辈经验总结，经过个人实践加以整理积累，仅供参考。

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><title>Insert title here</title><style>.left {float: left;width: 300px;height: 300px;background-color: red;}.right {background-color: orange;margin-left: 310px;height: 300px;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

实际效果：

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><title>Insert title here</title><style>.left {float: left;width: 300px;height: 300px;background-color: gray;margin-right: -100%;}.right {float: left;width: 100%;}.right-content {height: 300px;margin-left: 310px;background-color: black;}</style></head><body><div class="left"></div><div class="right"><div class="right-content"></div></div></body>
</html>

实际效果：

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><title>Insert title here</title><style>.left {float: left;width: 100%;height: 300px;background-color: blue;margin-right: -300px;}.right {float: right;width: 300px;height: 300px;background-color: yellow;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

实际效果：

DIV 左右布局方案相关推荐

CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述通过 Flexbox 布局模块与 CSS Grid布局模实现容器的居中 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
使用两种rem布局方案-实现静态苏宁易购移动端首页
使用两种rem布局方案-实现静态苏宁易购移动端首页方案1:rem+less+媒体查询 html common.less index.less 方案2:flexible.js+rem 小插件小问题 ...
火列星屯--最强大的CSS布局方案
一.总论首先给出结论:网格布局(Grid)是最强大的 CSS 布局方案. 虽说如此,但是仍要重视具体的应用场景,如果有其他写法可以提高代码的简洁和可读性,未必非要选择Gird不可. 网格布局就如同它 ...
计算机创新课堂教案,广东省创新杯说课大赛计算机类一等奖作品：《DIV+CSS布局网页》教学设计方案...
<广东省创新杯说课大赛计算机类一等奖作品:<DIV+CSS布局网页>教学设计方案>由会员分享,可在线阅读,更多相关<广东省创新杯说课大赛计算机类一等奖作品:<DIV ...
flexible.js 淘宝弹性布局方案
本文的内容就是介绍淘宝弹性布局方案lib-flexible实践, 原理是通过js事实的检测屏幕的大小并改变html标签的字体大小,再结合rem的特性来完成页面的自适应.下面是flexible作者的说明 ...
DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

DIV 左右布局方案

DIV 左右布局方案相关推荐

最新文章

热门文章