尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
三栏式布局详解(代码+图解)
三栏式布局三栏式布局就是两边固定中间自适应。三栏式布局实现方法有很多包括流体布局BFC三栏布局双飞翼布局圣杯布局Flex布局Table布局绝对定位布局网格布局流体布局左侧向左浮动、右侧向右浮动最后渲染中间实现最后渲染中间也就意味着在html中内容div写在最后并设置中间模块的 margin 值使中间模块宽度自适应缺点就是主要内容无法最先加载当页面内容较多时会影响用户体验div classwrap div classleft左侧/div div classright右侧/div div classmain中间/div /divstyle *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } .main{ height: 500px; background-color: aqua; margin-left: -100px; margin-right: -200px; } /style效果BFC布局BFC 区域不会与浮动元素重叠。左右模块各自向左右浮动并设置中间模块的overflowhidden使中间模块宽度自适应style *{ margin: 0; border: 0; } .left{ width: 100px; height:500px; background-color: yellow; float: left; } .main{ height: 500px; background-color: aqua; overflow: hidden; } .right{ width: 200px; height: 500px; background-color: palevioletred; float: right; } /style双飞翼布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置利用的是浮动元素和margin 负值中间设置子元素margin的左右值是左右两边元素的宽度主体内容可以优先加载HTML 代码结构稍微复杂点。div classwrap div classcenter div classcenter-child中间mmmmmmmmmm/div /div div classleft左侧/div div classright右侧/div /divstyle .wrap{ border: 1px solid #000; overflow: hidden; } .center{ width:100%; height:500px; background-color: yellow; float: left; } .center-child{ width:100%; height: 400px; background-color: aqua; //为子元素设置左右margin防止内容被遮挡 margin-left: 150px; margin-right: 250px; } .left{ width:150px; height:500px; background-color: red; float: left; margin-left: -100%; } .right{ width:250px; height:500px; background-color: blue; float: left; margin-left:-250px; } /style效果圣杯布局按照“中左右”的顺序排放元素都设置浮动最中间元素宽度设置为100%利用左右margin负边距将左右元素拉到左右位置圣杯布局使用padding和定位父元素设置左右padding再给左右元素设置相对定位div classwrap div classcenter/div div classleft/div div classright/div /divstyle .wrap{ border:1px red solid; padding:0 250px 0 200px; } .wrapdiv{ float: left; height:300px; } .wrap:after{ display:block; content: ; clear:both; } .center{ width:100%; background-color:yellow; } .left{ width:200px; background-color:blue; margin-left:-100%; position:relative; left:-200px; } .right{ width:250px; background-color:green; margin-left:-250px; position:relative; right:-250px; } /style效果Flex布局给父元素设置display: flex;justify-content: space-around即可代码简单方便div classwrap div classleft左侧/div div classcenter中间/div div classright右侧/div /divstyle .wrap{ display: flex; justify-content: space-around; } .left{ width:200px; height:500px; background-color: blue; } .center{ width:100%; height:500px; background-color: yellow; } .right{ width:100px; height:500px; background-color: pink; } /style效果最后要注意区分圣杯布局和双飞翼布局哦1
RELATED

相关推荐

TI bq2408x线性充电器评估与设计实践:从原理到热管理

TI bq2408x线性充电器评估与设计实践:从原理到热管理

1. 项目概述:为什么我们需要关注线性充电管理?在开发任何一款便携式设备时,无论是智能手表、蓝牙耳机还是手持医疗设备,电池管理系统的设计总是绕不开的核心难题。它直接决定了产品的续航、安全性和用户体验。而在这个系统中&…

📅 2026/9/19 5:41:30
leetcode---腾讯   盛最多水的容器

leetcode---腾讯 盛最多水的容器

原题: 给定 n 个非负整数 a1,a2,…,an,每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线,使得它们与 x 轴共同构成的…

📅 2026/8/22 1:23:25
不懂编程也能搭建AI助手?Coze(扣子)到底是什么?

不懂编程也能搭建AI助手?Coze(扣子)到底是什么?

字节跳动出品的AI Bot搭建平台,完全不需要写代码,用拖拉拽和自然语言就能创建你自己的AI助手。一文讲清楚Coze是什么、怎么用。 前言 LangChain(给开发者用的AI框架)和 Vibe Coding(用自然语言写代码)。但如…

📅 2026/9/15 23:11:24
MORE NEWS

更多资讯

📰

AquaPulse:边缘AI如何实现管道漏水实时检测与预警

1. 从一根漏水的水管说起:AquaPulse 到底想解决什么问题城市供水管网有个很反直觉的事实:漏损率长期居高不下,很多老城区的管网漏损能到20%甚至更高。也就是说,水厂送出去十吨水,有两吨在到达用户水表之前就已经渗进地…

📰

Claude Code vs Codex:同一把 TaoToken Key 跑 gin 仓库中间件重构

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Sails 请求起始时间属性 `req._startTime` 完全指南:原理、用法与响应耗时测量

后端 【免费下载链接】sails Realtime MVC Framework for Node.js 项目地址: https://gitcode.com/gh_mirrors/sa/sails 点击查看 免费下载 req._startTime 是 Sails(Realtime MVC Framework for Node.js)为每个入站请求记录的开始处理时刻&…

📰

理解 Apache MXNet 入门指南:核心概念、编程范式与 Gluon 混合编程详解

深度学习人工智能机器学习分布式训练 【免费下载链接】mxnet Lightweight, Portable, Flexible Distributed/Mobile Deep Learning with Dynamic, Mutation-aware Dataflow Dep Scheduler; for Python, R, Julia, Scala, Go, Javascript and more 项目地址: https:/…

📰

Apache Flink 集成 Hive 函数:HiveModule、原生聚合函数与 Hive UDF 完整使用指南

大数据流处理批处理数据工程 【免费下载链接】flink 项目地址: https://gitcode.com/gh_mirrors/fli/flink 点击查看 免费下载 本指南系统讲解如何在 Flink SQL 与 Table API 中复用 Hive 的函数生态:通过 HiveModule 将 Hive 内置函数加载为 Flink 系统…

📰

web3.js 仓库 CHANGELOG 规范与实践:基于 Keep a Changelog 与 SemVer 的自动化维护指南

web3.js 仓库 CHANGELOG 规范与实践:基于 Keep a Changelog 与 SemVer 的自动化维护指南 【免费下载链接】web3.js Collection of comprehensive TypeScript libraries for Interaction with the Ethereum JSON RPC API and utility functions. 项目地址: https:/…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬