实现三栏布局

作者: 5b5072cc2c5b | 来源:发表于2019-03-18 22:50 被阅读0次

CSS Flex实现各种布局
CSS简单布局任务
CSS的几种布局实现
入门任务11
CSS布局
CSS的简单布局及水平垂直居中
Android ImageView+Glide实现加载长图片(适
CSS布局
CSS布局(task11)
2018-11-12 小程序wx:for横向列表布局

实现中间自适应，两侧宽度固定的三栏布局
效果图如下:

效果图

实现方法：

1.利用float，左右两侧宽度固定，分别向左右浮动，中间利用margin来固定。

注意：此布局中间的div必须放在最后,

//html:
<div id="left">
  left
</div>
<div id="right">
  right
</div>
<div id="center">
  center
</div>
<style>
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  float: left;
  background-color: red;
}
#right{
  float: right;
  background-color: yellow;
}
#center{
  heigth: 50px;
  margin: 0 200px;
  background-color: green;
  word-break: break-all;
}
</style>

2.利用position：absolute，左右两个div左右分别为0，中间div左右分别为200；div位置无要求

<div id="left">
  left
</div>
<div id="center">
  center
</div>
<div id="right">
  right
</div>
<style>
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
}
#right{
  position: absolute;
  top: 0;
  right: 0;
  background-color: yellow;
}
#center{
  height: 50px;
  position: absolute; /*absolute布局，left: 200px;right: 200px;*/
  left: 200px;
  right: 200px;
  top: 0;
  background-color: green;
  word-break: break-all;
}
</style>

3.利用flex布局，左右两个div宽度固定为200，中间div 将flex设置为1

<div id="container">
  <div id="left">
    left
  </div>
  <div id="center">
    center
  </div>
  <div id="right">
    right
  </div>
</div>
<style>
#container{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  background-color: red;
}
#right{
  background-color: yellow;
}
#center{
  flex: 1; 
  /*flex是flex-grow，flex-shrink，flex-basis的缩写，
  flex-grow默认为0，将flex-grow设置为1，将分配剩余空间给center*/
}
</style>

4.双飞翼布局

中间div加一个wrapper包裹，wrapper的宽度设为100%，向左浮动；中间div利用margin居中，左右margin分别为左右div的宽度；
wrapper，左右div都左浮动；
左div利用margin：-100%（wrapper的宽度); 来居左；
右div利用margin：-200px(左侧div的宽度)来居右；

<div id="center-wrap">
  <div id="center">
    center
  </div>
</div>
<div id="left">
  left
</div>
<div id="right">
  right
</div>
<style>
#center-wrap{
  width: 100%; /*中间div外框宽度设置为100%*/
  float: left;
}
#center{
  heigth: 50px;
  margin: 0 200px;  /*中间div左右margin各设置为200px*/
  background-color: green;
}
#left,
#right{
  width: 200px;
  height: 50px;
  float: left;
}
#left{
  margin-left: -100%;   
/*左边div的左边距设为margin-left:-100%,来实现居左*/
  background-color: red;
}
#right{
  margin-left: -200px; 
  /*右边div的左边距设为margin-left:-200px,来实现居右*/
  background-color: blue;
}
</style>

5.圣杯布局

在三个div外层添加container，container设置padding： 0 200px; 左右padding分别为左右两个div的宽度
左中右三个div都定位为relative；向左浮动；
中间div设置width： 100%
左边div设置margin-left： -100%；left：-200px（自身宽度）来居左
右边div设置margin-right：-200px（自身宽度）来居右或者margin-left: -200px(自身宽度)+left：200px（自身宽度）来居右

<div id="container">
  <div id="center">
    center
  </div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
<style>
#container{
  padding: 0 200px; /*容器设置左右padding为左右div宽度*/
}
#center,#right,#left{
  /*三个div的position都设置为relative,并且向左浮动*/
  position: relative;
  float: left;
}
#center{
  width: 100%;
  heigth: 50px;
  background-color: green;
}
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  /*左边div的左边距设为margin-left:-100%,来实现居左*/
  margin-left: -100%;   
  left: -200px; /*left: -200px(自身宽度)*/
  background-color: red;
}
#right{
  /*右边div的左边距设为margin-right:-200px,来实现居右*/
  margin-right: -200px; 
  /*
  或者margin-left设置为-200px, left设置为200px,200px为div自身宽度
  margin-left: -200px;
  left: 200px;*/
  background-color: blue;
</style>

6.根据圣杯布局改变而来

中间div设置width：100%；padding: 0 200px;左右padding分别为左右div宽度；float：left；(脱离文档流)
左右div设置为position: absolute;
左边div设置left：0;
右边div设置right：0；

注意：三个div中间会有缝隙

<div id="container">
  <div id="center">
    center
  </div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
<style>
  #container{
  padding: 0 200px; /*容器设置左右padding为左右div宽度*/
}
#center{
  width: 100%;
  heigth: 50px;
  background-color: green;
  float: left; /*左浮动*/
}
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  position: absolute;
  left: 0;
  background-color: red;
}
#right{
  position: absolute;
  right: 0;
  background-color: blue;
}
</style>

7.table布局

利用table布局
container 设置display：table；width：100%；
左中右三个div设置display：table-cell;
左右div宽度为200px；

<div id="container">
  <div id="left">
    left
  </div>
  <div id="center">
    center
  </div>
  <div id="right">
    right
  </div>
</div>
<style>
 #container{
  display: table;
  width: 100%;
 }
#center,
#left,
#right{
  display: table-cell;
}
#center{
  background-color: green;
}
#left,
#right{
  width: 200px;
  height: 50px;
}
#left{
  background-color: red;
}
#right{
  background-color: blue;
}
</style>

8.grid布局

container设为display：grid，
设置每个元素的宽高：grid-template-rows：50px； grid-template-columns：200px auto 200px;

<div id="container">
  <div id="left">
    left
  </div>
  <div id="center">
    center
  </div>
  <div id="right">
    right
  </div>
</div>
<style>
 #container{
  display: grid;
  width: 100%;
  grid-template-rows: 50px;
  grid-template-columns: 200px auto 200px;
 }
#left{
  background-color: red;
}
#right{
  background-color: blue;
}
</style>