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

站长手记作者： 2024-08-28 14:55:01

在网页布局中，通常需要实现左边定宽右边自适应布局：实现方法有：浮动布局、flex布局、使用负margin、绝对定位、table布局

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

1、浮动布局

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

2.flex布局

.box{ display: flex;}
.left{width:200px;background: red;}
.right{width:100%;flex:1;background: blue;}/*等于左边栏宽度*/

3、使用负margin

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

*{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布局

.box{display: table;width:100%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; 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不支持

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70180.html