css常用左右布局方案整理
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常用左右布局方案整理的更多相关文章
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- div布局方案整理
实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案 1 左侧 DIV 设置 float 属性为 left ...
- 常用前端布局，CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- css 常用布局
「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
- css常用布局
1.一列布局 html: <div class="header"></div> <div class="body">< ...
- CSS常见布局问题整理
实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...
- CSS 常用的定位和布局方法汇总(已添加源码地址)
CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...
- 移动适配请使用比rem等更好的布局方案
移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配. 屏幕适配顾名思义 ...
随机推荐
- fhq treap——简单又好写的数据结构
今天上午学了一下fhq treap感觉真的很好用啊qwq 变量名解释: \(size[i]\)表示以该节点为根的子树大小 \(fix[i]\)表示随机权值 \(val[i]\)表示该节点的值 \(ch ...
- IO模型《三》非阻塞IO
非阻塞IO(non-blocking IO) Linux下,可以通过设置socket使其变为non-blocking.当对一个non-blocking socket执行读操作时,流程是这个样子: 从图 ...
- shell+crontab 实时服务进程监控重启
#!/bin/sh #filename: checkProcess.sh #示例:每分钟检测httpd是否在运行,不在运行则重启 #crontab -e # 加入:*/ * * * * checkPr ...
- “全栈2019”Java第六十七章：内部类、嵌套类详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Win8.1下安装sql server 2008 r2详解
我是来斗图的,安装了好多次,有一些配置还是不能烂熟于心啊,所以就想起来了米老师那句话,学习是个反复的过程.写个教程吧,很简单但是很实用. 首先打开"setup.exe"出现以下界面 ...
- [ActionScript 3.0] 判断XML属性是否存在
在as3中判断xml节点是否存在以及判断xml某节点是否存在某属性可用下面方法: if(xml.hasOwnProperty("frameRate")){ trace(" ...
- Python3之collections模块
简介 collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple namedtuple 是一个函数,它用来创建一个自定义的元组对象,并且规定了元组元素的个数 ...
- 一个网站同一域名不同目录下的文件访问到的cookie值不同是什么原因？
一个网站(e:\test):里面包含多个目录如: html css js php img ..... 等等.然后,我在js目录里面的js文件中设置了cookie:同样也在php目录中的php文件中设置 ...
- 免费观看vip/要劵的电影
免费观看vip/要劵的电影 1.在爱奇艺/腾讯视频中复制电影的连接 2.复制连接到这个网站中(http://www.qmaile.com/) 3.粘贴路径到这个网站相应的位置 4.点击go ,等待解析 ...
- vue 移动端，页面左右页面切换效果（切换过程中会出现白屏效果，布吉岛怎么优化，后来就发布前就弃用了）
<transition name="left"> <router-view v-if="getCms" class="Router& ...