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

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

<div class="box">

    <div class="left">左边定宽</div>

    <div class="right">右边自适应</div>

</div

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结构：

<div class="box">

  <div class="left">左边定宽</div>

  <div class="right">

     <div class="right_content">右边自适应</div>

  </div>

</div>

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;}/*等于左边栏宽度*/

办公资源网址导航 https://www.wode007.com

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的元素具有以下特性：