Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
【凤凰网络】提供优质的云南网站建设一条龙全包服务,从网站制作到云南百度竞价推广,以及昆明百度竞价托管代运营全套服务,看得见的效果!
当前位置: 网站首页 > 网站建设教程 >
css两个div自适应宽度布局方法大全（精华）
第一种方法：BFC块级格式化上下文
<div class="container1">
<div class="left1">-----左边固定宽度-----</div>
<div class="right1">----------------------------------------右边自适应宽度----------------------------------------</div>
</div>
<style>
.container1{ width:100%; height:100px; border:1px solid red;}
.left1{ float:left; margin-right:20px; width:200px; height:100%; background:yellow;}
.right1{ overflow:hidden; height:100%; background:blue;}
</style>
左边div浮动元素可以不设置具体宽度，配合margin-right和overflow:hidden。右边div仍然可以自适应宽度。
第二种方法：左浮动 + margin-left布局
<div class="container2">
<div class="left2">-----左边固定宽度-----</div>
<div class="right2">----------------------------------------右边自适应宽度----------------------------------------</div>
</div>
<style>
.container2{ width:100%; height:100px; border:1px solid red;}
.left2{ float:left; margin-right:20px; width:200px; height:100%; background:yellow;}
.right2{ margin-left:20px; height:100%; background:blue;}
</style>
第三种方法：flex布局
<div class="container3">
<div class="left3">-----左边固定宽度-----</div>
<div class="right3">----------------------------------------右边自适应宽度----------------------------------------</div>
</div>
<style>
.container3{ width:100%; height:100px; border:1px solid red; display:flex;/*设为伸缩容器*/}
.left3{ width:200px; height:100%; background:yellow;}
.right3{ height:100%; background:blue; flex:1;/*设为占比1，填充满剩余空间*/}
</style>
第四种方法：div模拟table布局
<div class="container4">
<div class="left4">-----左边固定宽度-----</div>
<div class="right4">----------------------------------------右边自适应宽度----------------------------------------</div>
</div>
<style>
.container4{ width:100%; height:100px; border:1px solid red; display:table;/*模拟table*/}
.left4{ width:200px; background:yellow; display:table-cell;/*模拟table*/}
.right4{ background:blue; display:table-cell;/*模拟table*/}
</style>
第五种方法：calc计算宽度布局
<div class="container5">
<div class="left5">-----左边固定宽度-----</div>
<div class="right5">----------------------------------------右边自适应宽度----------------------------------------</div>
</div>
<style>
.container5{ width:100%; height:100px; border:1px solid red;}
.left5{ float:left; width:200px; height:100%; background:yellow;}
.right5{ float:left; height:100%; background:blue; width:calc(100% - 200px);/*计算宽度*/}
</style>
【css两个div自适应宽度布局方法大全（精华）热度：126】 【更多网站建设教程】