三栏布局的几种方法

最新推荐文章于 2022-10-25 14:25:25 发布
最新推荐文章于 2022-10-25 14:25:25 发布
阅读量678 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zmm0413/article/details/80358317
版权

方法一、左右两栏分别左右浮动，中间宽度自适应

 给中间的div左右margin，左边margin为左边div的宽度，右边margin右边div的宽度

父元素overflow:hidden清除浮动


效果如下：


方法二：圣杯布局

给父元素加左右padding，左中右都为向左浮动，中间宽度100%



效果如下：


方法三：双飞翼布局

给中间div加入子元素，给子元素设置左右margin，为左右div留位置。


效果如下：


早睡选手第一名
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
三栏布局的几种实现方式
lan128lan的博客
01-14 1280
三栏布局算是网页中最常见的布局之一，尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。 另外，三栏布局在面试时也极容易遇到。下面介绍几种三栏布局的实现方式： 效果图： 1. 绝对定位 特点：简单粗暴，但不推荐，这里不做详细展示说明 2. 浮动 <style> .left{ backgr...
实现三栏布局的十种方式
最新发布
weixin_42745647的博客
10-01 711
实现三栏布局也是一道经典的面试题，如果你能侃侃而谈这十种实现三栏布局的方式，一定会令面试官眼前一亮。三栏布局即左右固定中间伸缩，将三栏布局的方式按照中间栏的渲染顺序可以分为三种：float实现的三种（中间栏最后渲染），flex、grid、绝对定位实现的三种（中间栏中间渲染），双飞翼圣杯实现的四种（中间栏最后渲染）
三栏布局实现的7种方法
weixin_42178670的博客
10-25 811
三栏布局实现的7种方法
前端三栏布局（包括圣杯，双飞翼）
小嘟的博客
09-23 283
三栏布局 前言：一直说抽时间把三栏布局的代码总结一下，总一直没时间没时间，感觉自己犯了拖延症了，不能再拖了，再拖下去，都不知道啥时候才写这个呀！！！（怕不是真有拖延症了吧， ） ...
前端学习——常见两栏和三栏布局
qq_50106904的博客
09-01 896
常见两栏和三栏布局
七种方式实现三栏布局
一枚不断学习的小码农一枚~
04-05 9550
三样布局：两边固定，中间自适应 一.流体布局（float布局） 1.首先绘制左右两栏，左栏左浮动，右栏右浮动 2.再绘制中间一栏，留出左右两栏距离与间距 <style> .container { border: 1px solid red; } /* 流体布局,先绘制左右栏 */ .left { float: left; width: 200px; height: 200px; background-color: aqua;
css实现三栏布局的几种方法及优缺点
09-22
除了上述两种方法，还有其他实现三栏布局的方式，例如： 3. **Flexbox布局** Flexbox（弹性盒模型）是CSS3引入的一种新的布局模式，可以轻松实现三栏布局。通过设置容器的`display: flex`和子元素的`flex`属性，...
Css左右定宽三栏布局.zip
08-04
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
div三栏布局左中右通过float浮动来设置
09-25
值得注意的是，为了防止父元素因浮动元素而高度塌陷，可以使用以下几种方法： - 清除浮动：为父元素添加`clear:both;`或者使用`clearfix`类。 - 使用`overflow:hidden;`：这会使父元素包含所有的浮动元素，从而避免...
CSS实现三栏布局的四种方法示例
09-24
可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看吧。
浅谈CSS三栏布局的Ｎ种实现
09-27
本文将探讨几种实现CSS三栏布局的方法。 1. **绝对定位法** 在这种方法中，我们使用CSS的`position: absolute`对左右两栏进行绝对定位。HTML结构包括三个div，分别对应左、中、右三栏。左右两栏设置绝对定位，中间...
三栏式布局详解（代码+图解）
qq_42445025的博客
09-02 2330
三栏式布局 三栏式布局就是两边固定，中间自适应。 三栏式布局实现方法有很多，包括： 流体布局 BFC三栏布局 双飞翼布局 圣杯布局 Flex布局 Table布局 绝对定位布局 网格布局 流体布局 左侧向左浮动、右侧向右浮动，最后渲染中间实现；最后渲染中间也就意味着在html中内容div写在最后，并设置中间模块的 margin 值使中间模块宽度自适应 缺点就是主要内容无法最先加载，当页面内...
三栏布局之浮动布局
weixin_47111901的博客
05-17 365
前言 在前端面试过程，HTML和CSS知识的比重已经不多的情况下，也会出一些综合性的面试题，例如：常见的页面布局类，如下： 假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应，示意图如下： 在回答这个问题之前，我希望大家分析一下，分析的点分为几个方面 这个问题要求真的是题目要求的这么简单吗？ 这个题的答案怎么去写，技巧在哪里？ 如果我想向面试官证明我的实力和能力，我该写几种答案？ 第一个点，这个题目真的像题目这么简单好回答吗？比如这个问题可以用浮动来解决，工作一两年还可以用上绝
三栏布局8种
weixin_50736511的博客
03-20 2454
浮动实现三栏布局 让左边的盒子和右边的盒子左右浮动 留出两边盒子的位置（利用padding） 这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。 2.浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的， 浮动元素脱离文档>流，要做清除浮动， 这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。 3.主要内容无法最先加载，当页面内容较多时会影响用户体验 <!DOCTYPE html> <html lang="en">
前端的三栏布局知识点
m0_57533638的博客
05-26 314
前端的三栏布局 文章目录前端的三栏布局1.浮动+margin2.浮动+BFC3.定位4.flex5.圣杯布局6.双飞翼布局 之前学习了两栏布局，然后又了解到还有个三栏布局，学习了一下，感觉和两栏布局差不多，就是在右边多了个固定宽度的盒子，它基本上都是两边定宽，中间是自适应。 下面我们就一起来了解一下吧。 下面全部的实现效果都是如下： 1.浮动+margin 注意这里的 DOM 结构，不是我们想象那样的左中右结构，而是左右中结构，主要是给左右设置了浮动之后，就会脱离文档流，在最后是正常的文档流就很容易使用
js三栏布局
hcyhcyhcy_的博客
03-25 1175
一 先center center宽100%。左中右浮动 左右margin-left上去。 container设置左右padding。三个position:relative， 左右left right。 先定义好header和footer的样式，使之横向撑满。 在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。 三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满 这样因为浮动的关系，center会占据整个conta
【JS提升】实现两栏与三栏布局的方法
小管打天下的博客
07-28 601
一、两栏布局 （1）两栏布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
element-ui三级菜单栏扩展
weixin_49790897的博客
05-27 2404
案例图： 需求：需要将二级菜单页面拓展到三级菜单 步骤如下： 1.在存放侧边栏json数据文件中，在对应需要进行拓展的菜单增加一个字段名为grandson的对象 2.找到侧边栏组件相对应的.vue文件 修改前： <!-- 菜单 --> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" height="100%" router text-color="#fff.
常见的网页布局有哪几种
04-02
常见的网页布局有以下几种： 1. 一栏式布局：整个页面只有一列，通常用于展示单一内容的网站，如博客、新闻或个人简历等。 2. 两栏式布局：页面分为左右两栏，通常用于展示不同的内容，如文章和侧边栏、产品介绍和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值