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

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

三栏布局

在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属性指定容器内元素的排列顺序

结语

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

相关推荐
然我20 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子25 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹29 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器35 分钟前
指定阿里镜像原理
前端
枷锁—sha40 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha42 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss