两列布局，三列布局的实现

最新推荐文章于 2024-06-11 12:15:54 发布

原创最新推荐文章于 2024-06-11 12:15:54 发布 · 929 阅读

1 ·

CC 4.0 BY-SA版权

前端面试同时被 3 个专栏收录

53 篇文章

订阅专栏

css

15 篇文章

订阅专栏

html

13 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现两列和三列布局。对于两列布局，探讨了利用BFC和绝对定位的方法；对于三列布局，分别讲解了两边固定中间自适应的两种实现方式，包括绝对定位和浮动的运用。

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

一、两列布局

1、利用BFC

<div class="left">
    left
</div>
<div class="right">
    right
</div>

* { padding: 0; margin: 0;}
.left{
    float: left;
    width: 200px;
    height: 800px;
    background-color: blueviolet;
}
.right{
    overflow: hidden;
    height: 800px;
    background-color: blue;
}

2、利用绝对定位

* { padding: 0; margin: 0;}
.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 800px;
    background-color: blueviolet;
}
.right{
    height: 800px;
    background-color: blue;
    margin-left: 200px;
}

二、三列布局

1、两边固定，中间自适应

（1）使用绝对定位

<div class="left">
    left
</div>
<div class="center">center</div>
<div class="right">
    right
</div>

* { padding: 0; margin: 0;}
.left{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 800px;
    background-color: blueviolet;
}
.center{
    width:auto;
    height: 800px;
    background-color: green;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 800px;
    background-color: blue;
 }

（2）利用浮动

<div class="left">
    left
</div>
<div class="right">
    right
</div>
<div class="center">center</div>

* { padding: 0; margin: 0;}
.left{
    float: left;
    width: 200px;
    height: 800px;
    background-color: blueviolet;
}
.center{
    width: auto;
    height: 800px;
    background-color: green;
    margin-left: 200px;
    margin-right: 200px;
}
.right{
    float: right;
    width: 200px;
    height: 800px;
    background-color: blue;
}

2、中间固定，两边宽度自适应

<div id="left">
    <div>left</div>
</div>
<div id="center">center</div>
<div id="right">
    <div>right</div>
</div>

* { padding: 0; margin: 0;}
#center { width: 600px; background: red; margin: 0 auto;height: 800px}
#left { position: absolute; top: 0; left: 0;width: 50%;}
#right { position: absolute; top: 0; right: 0; width: 50%;}
#left div { margin-right: 300px; position: relative; background: lime;height: 800px}
#right div { margin-left: 300px; position: relative; background: lime;height: 800px}