css网页布局 --- 左边固定，右边自适应
div的布局统一如下：
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
css的基本设置统一如下：
* {
margin: ;
}
html,body {
width: %;
height: %;
}
第一种方式：左边的div向左浮动，右边的div的width为100%，margin-left值设置为左边div的宽度。
div.wrap {
width: %;
height: %;
background: #fefefe;
}
div.left {
float: left;
width: 300px;
height: %;
background: #eafeea;
}
div.right {
width: %;
height: %;
margin-left: 300px;
background: pink;
}
这里因为没有内容，所以height: 100%来撑开。 左边div在float之后，脱离文档流，右边元素width: 100%，是父元素的宽度减去子元素的padding和margin的剩下的宽度，所以刚好可以做到右边div的自适应。
第二种方式： 和第一种方式的思路一样，只是这次我们可以通过将父元素设置为 position: relative； 将左边的元素设置为 position: absolute； 并且left为0。右边div不变。
div.wrap {
width: %;
height: %;
background: #fefefe;
position: relative;
}
div.left {
width: 300px;
position: absolute;
left: ;
height: %;
background: #eafeea;
}
div.right {
width: %;
height: %;
margin-left: 300px;
background: pink;
}
第三种方式： 使用BFC方式，即将右边的div设置overflow: hidden；这样就可以出发BFC了，而BFC的规则就是不会和浮动元素重叠，如下：
div.wrap {
width: %;
height: %;
background: #fefefe;
}
div.left {
float: left;
width: 300px;
height: %;
background: #eafeea;
}
div.right {
height: %;
overflow: hidden;
background: pink;
}
注意到： 这里我们直接把右边的div添加了overflow:hidden； 然后又把width: 100%去掉，否则会出现问题。
第四种方式：左边固定宽度 float，右边width设置为100%， float: right，然后margin-right: -300px即可，通过margin负边距，我们就可以达到同样的效果：
div.wrap {
width: %;
height: %;
background: #fefefe;
}
div.left {
float: left;
width: 300px;
height: %;
background: #eafeea;
}
div.right {
width: %;
float: right;
margin-right: -300px;
height: %;
background: pink;
}
记住： margin负边距影响的永远都是文档流，文档流会认为其减小了，但是实际上并没有减小。
第五种方式： 使用flex布局。 包裹层使用flex，内部就是弹性布局了，不用设置。
div.wrap {
display: flex;
width: %;
height: %;
background: #fefefe;
}
div.left {
width: 300px;
height: %;
background: #eafeea;
}
div.right {
width: %;
height: %;
background: pink;
}
即左边的div仅仅设置width:300px，右边的div设置为width：100%即可。
第六种方式： 左右两边全部使用绝对定位，左边设定宽度300px，右边100%。
div.wrap {
position: relative;
width: %;
height: %;
background: #fefefe;
}
div.left {
position: absolute;
left: ;
top: ;
width: 300px;
height: %;
background: #eafeea;
}
div.right {
position: absolute;
top: ;
left: 300px;
width: %;
height: %;
background: pink;
}
这种方法也是轻松实现。
第七种方式： 使用table布局。 包裹元素设置为 display: table； 子元素设置为 display: table-cell; 然后再设置好左边元素的宽度，右边元素不需要设置宽度。 并且是等高布局。
div.wrap {
display: table;
width: %;
height: %;
background: #fefefe;
}
div.left {
display: table-cell;
width: 300px;
height: %;
background: #eafeea;
}
div.right {
display: table-cell;
height: %;
background: pink;
}
效果如下：
css网页布局 --- 左边固定，右边自适应的更多相关文章
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- HTML布局之左右结构，左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
随机推荐
- C语言学生管理系统源码分享
大家好 我就是如假包换的...陈玲 自从运营了C语言程序设计微信公众号 很多粉丝都给我备注 ...奇葩 实在是不敢当 也被人开始叫玲玲姐 我知道 很多人都想看我出境 我本人也有 年多的舞台演讲训练 实 ...
- 函数作用域和块级作用域--你不知道的JavaScript
et和const在{}内声明都会变为外部不能访问的值,但是const声明的是常量,也不能修改 函数是 JavaScript 中最常见的作用域单元.本质上,声明在一个函数内部的变量或函数会在所处的作用域 ...
- Python调用Google翻译
出自:http://blog.csdn.net/zhaoyl03/article/details/8830806 最近想动手做一个文档自动下载器,需要模拟浏览器的行为.虽然感觉思路上没有困难,但在技术 ...
- 6.<1>四则运算的研究[栈]
计算1+2*3=,这个程序还是比较绕的,先将程序简化,只做+-*/和=五个运算符的关系.首先,假定这五个运算符中,=号的优先级最低,其次是+-,最高为*/.接着约定,"1+2*3=" ...
- day08(异常处理，创建异常，finally，throws和throw的区别)
异常处理, 异常的产生 运行时异常:程序运行中产生的异常:RuntimeException类. 编译时异常:程序在编译时产生的异常:除了RuntimeException类 其他都是编译时产生的 ...
- （网络流 模板 Edmonds-Karp）Drainage Ditches --POJ --1273
链接: http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total ...
- Codeforces777A Shell Game 2017-05-04 17:11 59人阅读 评论(0) 收藏
A. Shell Game time limit per test 0.5 seconds memory limit per test 256 megabytes input standard inp ...
- leetcode-爬楼梯(动态规划）
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...
- java 执行sql文件
# 背景 用例执行完毕,期望回滚数据,因此希望执行sql来回滚数据 # 步骤 直接show代码,借助的是mybatis的ScriptRunner /** * 执行xx库下的表备份脚本 * * @par ...
- 排序算法之堆排序（Heapsort）解析
一.堆排序的优缺点(pros and cons) (还是简单的说说这个,毕竟没有必要浪费时间去理解一个糟糕的的算法) 优点: 堆排序的效率与快排.归并相同,都达到了基于比较的排序算法效率的峰值(时间复 ...