实现两栏布局、三栏布局的几种方式_vue 两栏模式和三栏模式的切换路由配置-CSDN博客

本文详细介绍了使用CSS实现两栏和三栏布局的各种方法，包括float、overflow、calc和flex布局等，为网页设计提供了多种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两栏布局

1. float + margin

.first-block {
  background: #F44336;
  width: 100px;
  height: 100px;
  float: left;
}
.second-block {
  background: #00BCD4;
  height:100%;
  margin-left:100px;
}

2. float + overflow

.first-block {
  background: #F44336;
  width: 100px;
  height: 100px;
  float: left;
}
.second-block {
  background: #00BCD4;
  height:100%;
  width:100%;
  overflow: hidden;
  
}

3.float + calc

.first-block {
  background: #F44336;
  width: 100px;
  height: 100px;
  float: left;
}
.second-block {
  background: #00BCD4;
  height:100%;
  float: left;
  width: calc(100% - 100px)
}

4.dispaly:flex

<div class="flex-box">
    <div class="first-block"></div>
    <div class="second-block">
    </div>
</div>

.flex-box{
  display:flex;
}
.first-block {
  background: #F44336;
  width: 100px;
  height:100px;
}
.second-block {
  flex:1;
  background: #00BCD4;
  height:100%;
  height: 800px;
}

三栏布局

1.float + overflow

<div class="box">
    <div class="left">1</div>
    <div class="right">3</div>
    <div class="content">2</div>
</div>


.box > div {
    min-height: 100px;
}
.left {
    float: left;
    width: 100px;
    background: red;
}
.content {
    background: yellow;
    height:300px;
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
    background: blue;
}

2.position

<div class="box">
    <div class="left">1</div>
    <div class="right">3</div>
    <div class="content">2</div>
</div>

.box  {
    position:relative;
}

.box > div {
    position:absolute;
}
.left {
    left:0;
    width: 100px;
    background: red;
}
.content {
    background: yellow;
    left:100px;
    right:100px;
}
.right {
    right:0;
    width:100px;
    background: blue;
}

3. flex布局

<div class="box">
    <div class="left">1</div>
    <div class="content">2</div>
    <div class="right">3</div>
</div>

.box  {
  display: flex;
}

.left {
    width: 100px;
    background: red;
}
.content {
    background: yellow;
    flex:1;
}
.right {
    width:100px;
    background: blue;
}