CSS3实现三栏布局 左右固定 中间自适应 /圣杯布局/双飞翼布局

于 2022-09-05 15:32:45 发布
阅读量451 收藏 2
点赞数 2
分类专栏： css3 html 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57404393/article/details/126705676
版权
本文介绍了使用CSS3实现三栏布局的方法，重点讲解了圣杯布局和双飞翼布局的原理及步骤。这两种布局模式能确保中间栏内容先加载且自适应宽度，两侧栏固定，适用于PC端网页设计。双飞翼布局通过设置浮动和内部分隔盒来实现，而圣杯布局则通过触发BFC避免内容重叠。
摘要由CSDN通过智能技术生成

CSS3实现三栏布局 左右固定 中间自适应 /圣杯布局/双飞翼布局

圣杯布局/双飞翼布局：中间一栏先加载和渲染，两侧内容固定，中间内容随着宽度自适应,一般用于pc端网页

双飞翼实现步骤：

1、先写出3个<div>盒子

<div class="head">头部</div>
    <div class="wrp">
中间
    </div>
    <div class="bottom">
尾部
</div>

2、中间盒子加上左右中三个<div>，为了不使盒子脱离文本流添加中间<div>的顺序要为左右中

<div class="head">头部</div>
    <div class="wrp">
 <div class="left">我是左边</div>
    <div class="right">我是右边</div>
  <div class="center">我是中间</div>
    </div>
    <div class="bottom">
尾部
</div>

3.新添加的盒子各设置宽，高。然后左盒子设置左浮动，右盒子设置右浮动，

最低0.47元/天 解锁文章
安心@-@
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS三栏布局（左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局）
大叔学前端的博客
08-04 294
自己在做一个后台管理系统，没有美工，就自己用CSS简单搞一个三栏布局的页面。 左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局。 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS三栏布局、左右两栏固定宽度</title> <style type="text/css">* {
css实现三栏布局（左右固定，中间自适应）
blueberry_liang的博客
05-09 926
1、浮动布局 注意html代码中三栏的先后顺序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
五种方式实现三栏布局，左右固定中间自适应。
weixin_44954059的博客
04-27 441
1.浮动 2.定位 3.flex 4.圣杯布局 5.双飞翼布局 1.浮动： ！注意，要把middle放在最后 <style> body { margin: 0; padding: 0; } .container { width: 100%; height: 200px; } .left { width: 300px; height: 200px; background
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
ZXH2017的博客
03-01 1万+
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟，1分钟~2分钟~3分钟~4分钟~5分钟！好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） &lt;style&gt; html * { padding: 0; ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
多分享一点点，共同进步一点点
08-18 2101
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。...
6种三栏布局【中间自适应】｜包含双飞翼圣杯
02-18
1. float+margin 2. float+bfc 3. flex 4. 父相子绝 5. 圣杯布局 6. 双飞翼
CSS布局之圣杯布局与双飞翼布局
01-21
按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。 圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 1.将三者都设置 float...
如何做出双飞翼布局与圣杯布局
01-08
双飞翼布局与圣杯布局是网页开发中两种常见的三栏布局方式，它们的主要目标是实现两侧栏宽度固定，中间栏宽度自适应，并且在页面加载时优先展示主要内容，提高用户体验。这两种布局方法都考虑了不同分辨率设备上的...
浅谈css双飞翼布局和圣杯布局
01-19
双飞翼布局和圣杯布局都是实现两边固定中间自适应的三栏布局的方式，最近在整理三栏布局实现方式的笔记，决定但拉出来一篇，记一下这两个经典布局。 1、圣杯布局 浮动、负边距、相对定位、不添加额外标签 效果图 ...
使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法
Lee_taotao的博客
06-03 1757
1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后) 如果窗口太小，右边元素会被挤到下一行 <head> <style> .box{ height: 200px; padding: 0 200px 0 100px; } .l...
详解css布局实现左中右布局的5种方式
09-24
主要介绍了详解css布局实现左中右布局的5种方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css固定在右中间位置,css布局，左右固定中间自适应实现
weixin_36132740的博客
08-03 462
1.绝对定位+浮动布局测试.demo{position: relative;width: 1000px;height: 400px;margin: 0 auto;border: 1px solid red;}.left{float: left;width: 200px;height: 100%;background-color: blue;}.mid{position: absolute;left...
基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）
热门推荐
qazxbjp2010的博客
02-23 2万+
之前写过一个小项目，首先这个页面布局是这个样子滴，举个栗子，京东的首页： 这算是一种还算常见的页面样式吧，头部和底部固定（或者底部固定没有头、头部固定没有底），有的会用fixed去做，但有在很多手机上会出现很多的奇葩的问题。 思前想后，后来我决定使用弹性布局去做，至少在手机浏览器中都是支持的，虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS，配合HTML5 history AP
纯CSS使用Float实现HTML双飞翼布局
monkey's的博客
07-14 118
需求：实现一个三列布局 左中右布局 左右2遍固定 中间内容区域宽度自适应 双飞燕布局 步骤 使用float属性让三列向左浮动 使用负margin属性让左右两列与中间列处于同一水平线上 在中间中增加一个div内容元素，设置margin的值为左右两列的宽度 最后，别忘记清楚浮动，让父元素正常显示 代码 css .container { width: 800px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
内容优先的 CSS 三列布局
zuoming99的专栏
11-05 132
这样的布局可以确保中间内容首先被下载，也更有利于SEO width、margin等变量的修改注意参考注释     &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt; &lt;
css的经典三栏布局如何实现,CSS-三栏布局的几种实现方式
weixin_39737051的博客
08-04 383
常见布局float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局、(圣杯布局、双飞翼布局、calc()函数)三栏布局左右定宽(200px)，中间自适应大概就是这样的：如果中间部分height比较大，那效果是这样:1.float布局模板部分：左边元素定宽右边元素定宽中间元素自适应 // 注意这里！复制代码css部分：/*清除浏览器默认边距*/* {paddi...
前端新手上路之css篇(三栏布局)
linglingzi001的博客
12-09 161
三栏布局 三列布局要求： 1.两边固定，中间自适应 2. 中间列要完整显示 3.中间列要优先加载 1.两边浮动，中间用margin隔开 浮动会脱离文档流，不能浮到前面的元素上面，所以只能把中间列放在最后 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&...
CSS布局三个盒子左中右一排
ONLYSRY的博客
07-29 2725
CSS布局三个盒子左中右一排。
css 3个元素中间的元素_CSS3的草率元素
culiao9310的博客
09-29 428
css 3个元素中间的元素View demo 查看演示Download Source 下载源It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visu...
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
最新发布
08-10
### 回答1： <div style="width:100%;"> <div style="float:left;width:30%;">左栏内容</div> <div style="float:left;width:40%;margin-left:2%;">中间栏内容</div> <div style="float:right;width:30%;">右栏内容</div> </div> ### 回答2： 可以使用HTML和CSS来创建一个三栏布局，其中左右两列的宽度固定，而中间列的宽度自适应。 首先，我们需要使用HTML创建一个三列的容器，可以使用`<div>`标签来实现。代码如下： ```html <div class="container"> <div class="left-column"></div> <div class="middle-column"></div> <div class="right-column"></div> </div> ``` 接下来，我们可以使用CSS来设置样式，以实现固定宽度和自适应宽度的效果。首先，我们设置三列容器的样式，将其设置为一行布局，并使用`display: flex;`属性，使其自动伸缩。同时，设置容器的宽度为100%，以确保占据整个容器的宽度。代码如下： ```css .container { display: flex; width: 100%; } ``` 接下来，我们为左中右三列设置样式。设置左右两列的宽度为固定值，例如200像素。代码如下： ```css .left-column { width: 200px; } .right-column { width: 200px; } ``` 为了让中间列自适应宽度，我们可以使用`flex-grow`属性，设置中间列的伸缩比例为1，使其自动填充剩余的宽度。代码如下： ```css .middle-column { flex-grow: 1; } ``` 最后，为了使布局更加美观，我们可以为三列容器和内部的列添加一些样式，例如背景色和内边距。代码如下： ```css .container { background-color: #f1f1f1; padding: 10px; } .left-column, .middle-column, .right-column { background-color: #e0e0e0; padding: 10px; margin: 5px; } ``` 通过这样设置，我们就可以得到一个具有固定宽度左右列和自适应宽度中间列的三栏布局。 请注意，以上代码只是一个示例，你可以根据自己的需求进行调整和修改。 ### 回答3： 要实现一个左右宽度固定中间自适应的三栏布局，可以使用HTML和CSS进行编写。 首先，在HTML中，我们可以使用```<div>```标签来创建三个元素，分别代表左栏、中栏和右栏。例如： ``` <div class="left-column">左栏内容</div> <div class="middle-column">中栏内容</div> <div class="right-column">右栏内容</div> ``` 然后，我们需要使用CSS来设置这些元素的样式。首先，设置左栏和右栏的宽度固定，可以使用```width```属性进行设置，例如： ``` .left-column { width: 200px; } .right-column { width: 200px; } ``` 接下来，设置中栏的宽度自适应，可以使用```flexbox```布局来实现。在CSS中，将父元素设置为```display: flex;```，然后将中栏设置为```flex-grow: 1;```，这样中栏的宽度将会自适应。例如： ``` body { display: flex; } .middle-column { flex-grow: 1; } ``` 最后，可以添加一些样式来美化布局，如设置背景颜色、边框样式等。 完整的HTML和CSS代码如下： ``` <!DOCTYPE html> <html> <head> <style> .left-column { width: 200px; background-color: lightgray; } .middle-column { flex-grow: 1; background-color: white; } .right-column { width: 200px; background-color: lightgray; } </style> </head> <body> <div class="left-column">左栏内容</div> <div class="middle-column">中栏内容</div> <div class="right-column">右栏内容</div> </body> </html> ``` 通过上述HTML和CSS代码，我们实现了一个左右宽度固定中间自适应的三栏布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值