三栏布局,到底哪种最好用呢

想必在前端奋战的大伙们都知道三栏布局,它有各种各样的实现方法,那么我们又该如何选择呢?其实它们都大差不差,选择哪一个纯看自己心情,哪个简单用哪个呗。

三栏布局

在Web设计中,三栏布局是一种常见的网页结构,广泛应用于新闻网站、博客、论坛以及内容密集型的页面。这种布局就是一个主内容区域配两个一左一右的边栏,边栏通常用于展示广告、菜单或其他辅助信息,像我们掘金用的就是典型的三栏布局。

三个栏:左边菜单、中间文章、右边堆一些其他关键的模块。

三栏布局的关键

  • 必须让主要内容的加载优先于侧栏内容的加载。不然你让用户先看广告?好好好,你是懂盈利的。
  • 左右固定,中间自适应:页面的整个宽我们是不能保证它的大小的,所以我们不能把它们的宽度写死,这里需要把左右两栏固定大小,让主要内容自适应。

各种实现方式

圣杯布局:

js 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            padding: 0 200px;
        }
        .left,.right {
            height: 200px;
            width: 200px;
            background: #1adc20;
        }
        .content {
            width: 100%;
            background:yellow;
            height: 100%;
        }
        .page div{
            float: left;
        }
        .left{
            margin-left:-200px;
            position: relative;
            left:-100%;
        }
        .right{
            margin-right: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

通过 float 属性使所有栏浮动,然后利用负边距使左右两栏"挤"进中间栏的空间,从而实现固定宽度而不影响中间栏内容。至于为什么叫这个名呢,我也很知道...

双飞翼布局:

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .page {
            height: 200px;
        }
        .left,
        .right {
            width: 200px;
            height: 200px;
            background: greenyellow;
        }
        .content{
            height: 100%;
            background:pink;
            width: 100%;
        }
        .inner{
            margin:0 200px;
            height: 100%;
        }
        .page>div{
            float: left;
        }
        .left{
            margin-left:-100%;
        }
        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在中间栏内部嵌套另一个 div,通过设置嵌套元素的 margin来实现与左右两栏的对齐,而中间栏本身保持100%宽度

弹性布局:

js 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .page {
            height: 200px;
            font-size: 0;
            display: flex;
        }
        .left,
        .right {
            height: 200px;
            width: 200px;
            background: #1adc20;
        }
        .content {
            height: 200px;
            background: #dfef04;
            width: calc(100vw - 400px);
            flex:1;
            order:1;
        }
        .page div{
            display: inline-block;
            font-size:20px;
        }
        .right{
            order:2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

运用CSS中的 order属性指定容器内元素的排列顺序

结语

这三种就是常见的三栏布局的实现方式,实现起来其实很简单,但就是细节不能丢了。布局设计不仅关乎美学,更是用户体验和信息架构的重要组成部分。

相关推荐
伍哥的传说36 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783838 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为