网站制作一条龙服务_网站百度排名优化推广(seo)服务_【凤凰网络】

当前位置: 网站首页 > 网站建设教程 >

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】 【更多网站建设教程
Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
凤凰网络:提供优质的网站制作一条龙服务,并通过百度网站排名优化推广(seo)服务,使seo优化后的网站,获得快速网站关键词排名提升到首页的效果!