css实现左边定宽右边自适应的5种方法总汇小白攻略_宽高入门基础知识

在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下:左边定宽右边自适应
1、浮动布局左边设置左浮动,右边宽度设置100%.left{width:200px;float:left;backgrou

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

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

css实现左边定宽右边自适应的5种方法总汇小白攻略_宽高入门基础知识

<div class="box">
	<div class="left">左边定宽</div>
	<div class="right">右边自适应</div>
</div>

1、浮动布局

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

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

2.flex布局

父容器设置 display:flex;Right部分设置 flex:1 

.box{ display: flex;}
.left{width:200px;background: red;}
.right{width:100%;flex:1;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:0;padding: 0;}
.left{width:200px;float:left;margin-right:-200px;background: red;}
.right{width:100%;float:left;}
.right_content{margin-left:200px;background: blue;}

4.绝对定位

左右两边都绝对定位  

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

5.table布局

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

.box{display: table;width:100%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; display: table-cell;}

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

海计划公众号
(0)
上一篇 2020/04/05 02:01
下一篇 2020/04/05 02:01

您可能感兴趣的内容