实际项目开发过程中我们经常会遇到页面div左右布局的需求:左侧 div 固定宽度,右侧 div 自适应宽度,填充满剩余页面,下面整理几种常用的方案 

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
} .left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
} .right {
margin-left: 310px;
height: 300px;
background: #efefef;
}
</style>
</head>
<body>
<p>1 左侧 DIV 设置 float 属性为 left,右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p>
<div class="left">left</div>
<div class="right">right</div> </body>
</html>

实际效果:

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
} .left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
margin-right: -100%;
} .right {
float: left;
width: 100%;
} .right-content {
height: 300px;
margin-left: 310px;
background: #efefef;
} </style>
</head>
<body>
<p>2左侧 DIV 设置 float 属性为 left,负边距 100%,右侧 DIV 中嵌套一个 DIV,页面内容放入嵌套的 DIV 中,右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度</p> <div class="left">left</div>
<div class="right">
<div class="right-content">right</div>
</div> </body>
</html>

实际效果:

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
} .left {
float: left;
width: 100%;
height: 300px;
background: #bfbfbf;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
background: #efefef;
} </style>
</head>
<body>
<p>3 如果将需求修改为右侧固定宽度而左侧自适应宽度</p> <div class="left">left</div>
<div class="right">right</div> </body>
</html>

实际效果:

4 左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p{
margin: 20px 0;
text-align: center;
} .left {
float: left;
width: 200px;
height: 200px;
background: #bfbfbf;
} .right {
overflow: hidden;
height: 200px;
background: #efefef;
}
</style> </head>
<body> <p>左边左浮动,右边overflow:hidden 不过这种方法IE6下不兼容</p> <div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</body>
</html>

实际效果:

5 左边使用绝对定位,右边使用margin-left

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左边使用绝对定位,右边使用margin-left</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p{
margin: 20px 0;
text-align: center;
}
.content{
position: relative;
} .left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #bfbfbf;
} .right {
margin-left: 200px;
height: 200px;
background: #efefef;
}
</style>
</head>
<body> <p>左边使用绝对定位,右边使用margin-left-最外层需要设置相对定位</p> <div class="content">
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div> </body>
</html>

实际效果:

6 左边绝对定位,右边也绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左边绝对定位,右边也绝对定位</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} p {
margin: 20px 0;
text-align: center;
} .content {
position: relative;
} .left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #bfbfbf;
} .right {
position: absolute;
left: 200px;
top: 0;
right: 0;
height: 200px;
background: #efefef;
}
</style>
</head>
<body> <p>左边绝对定位,右边也绝对定位</p> <div class="content">
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div> </body>
</html>

实际效果:

css常用左右布局方案整理的更多相关文章

  1. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  2. DIV+CSS常用网页布局技巧!

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  3. div布局方案整理

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

  4. 常用前端布局,CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  5. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  6. css常用布局

    1.一列布局 html: <div class="header"></div> <div class="body">< ...

  7. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  8. CSS 常用的定位和布局方法汇总(已添加源码地址)

    CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...

  9. 移动适配请使用比rem等更好的布局方案

      移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配.   屏幕适配顾名思义 ...

随机推荐

  1. Ubuntu16.04中把默认JAVA设置为Oracle的JDK!

    系统当中已经存在了OpenJDK,默认的JDK是它,并不是Oracle的JDK,执行下面操作就可以把Oracle的JDK设置为默认的了! 首先假设我们已经把Oracle的JDK安装和配置好了,但是就是 ...

  2. 【数据结构】10分钟教你用栈求解迷宫老鼠问题超详细教程附C++源代码

    问题描述 给定一张迷宫地图和一个迷宫入口,然后进入迷宫探索找到一个出口.如下图所示: 该图是一个矩形区域,有一个入口和出口.迷宫内部包含不能穿越的墙壁或者障碍物.这些障碍物沿着行和列放置,与迷宫的边界 ...

  3. P3366 (模板)最小生成树

    2019-01-30 最小生成树基本算法 定义: 给定一个边带权的无向图G=(V,E),n=|V|,m=|E|,由V中全部n个定点和E中n-1条边构成的无向连通子图被称为G的一颗生成树. 边的权值之和 ...

  4. 题目1016:火星A+B(字符串拆分)

    问题来源 http://ac.jobdu.com/problem.php?pid=1016 问题描述 每次输入两个数,不同数位之间用逗号隔开,其中,第n位的进制就是第n个素数,即个位数是2进制的,十位 ...

  5. NASA的10条代码编写原则

    NASA的10条代码编写原则 作者: Gerard J. Holzmann 来源: InfoQ 原文链接 英文原文:NASA's 10 Coding Rules for Writing Safety ...

  6. 搭建spring boot项目

    1.建立maven项目 点击finish,完成创建maven项目 在pom.xml文件中添加如下代码: <parent> <groupId>org.springframewor ...

  7. Rstudio常用快捷键 “原版+中文” 整理

  8. Linux and Shell 实用命令

    -name '*.jar' -printf '%p:' ### 查看CPU使用率 mpstat -P ALL

  9. python3 md5

    参考: https://docs.python.org/3/library/hashlib.html?highlight=hashlib#credits https://blog.csdn.net/w ...

  10. Android学习系列--App列表之拖拽ListView(上)

    研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. 一 ...