两栏布局和三栏布局

作者: 前端咸蛋黄 | 来源:发表于2019-02-21 14:47 被阅读0次

用CSS实现布局（两栏布局，多栏布局）
CSS布局分类
布局
Flex布局
CSS Flex实现各种布局
CSS布局
两栏布局和三栏布局
两栏布局和三栏布局
CSS布局知识点
CSS边用边学（一）：一站式各种布局实践

一、两栏布局

左边固定长度，右边自适应

1. 浮动布局 + BFC

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>
.left{
  float:left;
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  display:flow-root
}

2. 浮动布局 / 绝对定位 + 外边距

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
</div>
.left{
  float:left;/* position:absolute; */
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  margin-left:100px;
}

3. 使用Flexbox

.contain{
  display:flex;
  flex-direction:row;
}
.left{
  border:2px solid red;
  width:100px;
}
.right{
  border:2px solid black;
  flex:1;  
}

二、三栏布局

两边固定长度，中间自适应

1. 浮动布局 + BFC

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</div>
.left{
  border:2px solid red;
  width:100px;
  float:left;
}
.center{
  border:2px solid black;
  display:flow-root;
}
.right{
  border:2px solid red;
  width:100px;
  float:right;
}

2. 浮动布局 / 绝对定位 + 外边距

<div class="contain">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="center">中</div>
</div>
.left{
  border:2px solid red;
  width:100px;
  float:left;
}
.center{
  border:2px solid black;
  margin:0 100px
}
.right{
  border:2px solid red;
  width:100px;
  float:right;
}

3. 使用Flexbox

<div class="contain">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</div>
.contain{
  display:flex;
  flex-direction:row;
}
.left{
  border:2px solid red;
  width:100px;
}
.center{
  border:2px solid black;
  flex:1
}
.right{
  border:2px solid red;
  width:100px;
}