Layout 不可思议(二)—— 两侧定宽的三列布局

时间:2022-03-12 14:28:39

三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透

网上相关的文章很多,原本已无必要再做赘述

不过既然开了 Layout 系列,三列布局就是必修课

本文整理了一些常用的实现方法,然后加入了一些个人愚见,希望能给诸位看官一些新的启发

效果图:

Layout 不可思议(二)—— 两侧定宽的三列布局

一、绝对定位

最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧

HTML 结构:

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

CSS 样式:

.container {
position: relative;
}
.left,
.right {
position: absolute;
top:;
width: 200px;
}
.left {
left:;
}
.right {
right: 0px;
}
.main {
margin: 0 200px;
}

二、负值 margin

绝对定位方案的变种,利用 margin 可以设置负值的特性,模拟出类似于定位的效果,应用最广的方案

HTML 结构:

<div class="container">
<div class="left"></div>
<div class="main-wrap">
<div class="main"></div>
</div>
<div class="right"></div>
</div>

CSS 样式:

.container {
overflow: hidden;
}
.left,
.right {
float: left;
width: 200px;
}
.main-wrap {
float: left;
width: 100%;
margin: 0 -200px;
}
.main {
margin: 0 200px;
}

这种方案的重点在于,中间列 main 一定要用双层标签,外层为容器,内层才是主体内容

三列都设置了浮动 float,可以用 display: inline-block 替换

关于这种方案还有一种变式:

将中间列的 html 部分挪到最前,然后 left 容器设置 margin-left: -100%

aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />

这种方案也能实现同样的效果,但由于 html 结构的顺序发生了改变,所以我更推荐使用原始方案

三、左右浮动

流式布局,分别设置左列 float:left 和右列 float:right,然后让中间列“流”入两列之间

HTML 结构:

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

CSS 样式:

.container {
overflow: hidden;
}
.left,
.right {
width: 200px;
}
.main {
width: auto;
}
.left {
float: left;
}
.right {
float: right;
}

因为使用了左右浮动,所以不能用 display:inline-block 替换,而且中间列必须放到最后

四、Flex 布局

最简单省事儿但兼容性最差的方案,可以用在移动端 如果移动端也要做三列布局的话

HTML 结构:

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

CSS 样式:

.container {
display: flex;
}
.left, .right {
width: 200px;
}
.main {
display: flex;
flex: auto;
}