android 右边充满 左边自适应,css实现左边定宽右边自适应的5种方法总汇

在网页布局中，通常需要实现左边定宽右边自适应布局，默认html的结构如下：

左边定宽

右边自适应

1、浮动布局

左边设置左浮动，右边宽度设置100%

.left{width:200px;float:left;background: red;}

.right{width:%;margin-left: 200px;background: blue;}/*等于左边栏宽度*/

2.flex布局

父容器设置 display：flex；Right部分设置 flex：1

.box{ display: flex;}

.left{width:200px;background: red;}

.right{width:%;flex:;background: blue;}/*等于左边栏宽度*/

3、使用负margin

首先需要修改html结构，为自适应部分添加容器 .right_content, 同时改变左右部分的位置。

html结构：

左边定宽

右边自适应

css代码：

*{margin:;padding: ;}

.left{width:200px;float:left;margin-right:-200px;background: red;}

.right{width:%;float:left;}

.right_content{margin-left:200px;background: blue;}

4.绝对定位

左右两边都绝对定位

.left{width:200px;background: red; position: absolute;left:;}

.right{width:%;background: blue;position: absolute;left:200px;}/*等于左边栏宽度*/

5.table布局

table(父级元素)与tabel-cell(两个子集元素)

.box{display: table;width:%;}

.left{width:200px;background: red; display: table-cell;}

.right{background: blue; display: table-cell;}

display:table-cell的元素具有以下特性：

text-align、vertical-align等对齐属性起作用，margin不起作用。宽高百分比值不起作用。

会生成虚拟的table、tr把自己包裹住，如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住，并一行等高显示

多个table-cell元素会占满被设置了display: table的元素的宽度，如果一个元素被设置了宽度，那么其他剩余的table-cell元素会占满剩下的宽度。当然，如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度。

对设置了float、absolute的元素不起作用。且IE6、7不支持

css布局：定宽，自适应

css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

CSS 实现行内和上下自适应的几种方法

在写一个移动端网页,发现网页的头部搜索框两边各有固定宽度的按钮,搜索框可以根据宽度的变化来改变自己的宽度,达到填充的目的,也就是一种自适应吧,下面写写自己尝试的几种方法 一 利用css3 的width ...

css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应

左边固定宽度,右边自适应 浮动布局的方法

css布局：左边定宽、右边自适应

方法一 : 左边 左浮动,右边 margin-left *{margin: 0;padding: 0;} .left{ float: left; width: 200px; border: 1px s ...

CSS布局 -- 左右定宽，中间自适应

左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left  margin-right 查看 demo ..

CSS基础布局--居中对齐，左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

css 关于两栏布局，左边固定，右边自适应

好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup