双飞翼布局（中间自由伸缩，两边固定布局）

最新推荐文章于 2023-02-20 10:55:56 发布
最新推荐文章于 2023-02-20 10:55:56 发布
阅读量459 收藏 1
点赞数
分类专栏： CSS 文章标签： CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36963245/article/details/95070872
版权

所谓的双飞翼布局，所有两侧元素固定宽高，中间部分根据页面宽度自由伸缩（移动端）
京东的搜索框部分就是一个典型的双飞翼布局

方式一：flex布局

1.父盒子设置display:flex;
2.左右盒子设置固定宽高，中间部分设置flex:1

方式二：定位

1.左右盒子设置绝对定位
2.中间盒子使用标准流，且给左右相应的margin

方式三：浮动

1.左右使用浮动，一个左浮动，一个右浮动
2.中间部分宽度使用计算属性，calc(100%-左右宽度之和)

静静子~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
双飞翼布局（css）
Y0admin的博客
10-27 1999
1. DOM结构 <div class="head"></div> <div class="container column"> <div class="center"></div> </div> <div class="left column"></div> <div class="right column"></div>
双飞翼布局
kaixinnijiutiaowu的博客
06-05 3691
双飞翼布局一、什么是双飞翼布局双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现：就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。 二、HTML布局首先设置一个container容器，里面放置左中右三个盒子，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染。&lt;div class="container"&gt;    &lt;d...
经典布局-双飞翼
东东爱编码博客
06-09 467
文章目录一、双飞翼布局1. 具体实现 一、双飞翼布局 产生的背景： 针对圣杯布局的缺点，淘宝的工程署们提出了双飞翼布局，原理：在中间区域加一层dom节点，然后添加左右margin，实现三栏布局。 1. 具体实现 代码骨架： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
双飞翼布局详解
dyb2440492276的博客
03-21 6247
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 双飞翼布局为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。 css代码： .header,.footer{ height: 200px; width: 100%; background-color: #0000FF; }
双飞翼布局的三种布局方式
weixin_71104826的博客
12-29 223
布局
双飞翼布局和圣杯布局
01-08
双飞翼布局和圣杯布局  网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。  首先三...
如何做出双飞翼布局与圣杯布局
01-08
说起网站布局，之前一个做PS设计的朋友说过“网站布局”不就和我做图片一样，把各种需要的组件一摆，然后设个宽高给个定位不就...而今天我们的主题，“双飞翼布局”与“圣杯布局”就是一个两边固定，中间宽度自适应，并
css多种方式实现双飞翼布局
09-22
主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局，感兴趣的朋友一起学习吧
几种常见的CSS布局-- 双飞翼布局
LuckXinXin的博客
02-05 468
双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。 .container { /*padding-left:150px;*/ /*padding-right:190px;*/ } .main-wrap { width: 100%; float: left; } .main { margin-left: 150px; margin-rig.
实现双飞翼布局（圣杯布局）的三种方式
weixin_52976120的博客
12-29 882
【代码】实现双飞翼布局（圣杯布局）的三种方式。
css(8)圣杯布局、双飞翼布局、两栏布局
wsz123456wsz的博客
02-20 260
圣杯布局、双飞翼布局、两栏布局
实现双飞翼布局的三种方式
qq_43784866的博客
05-29 481
实现双飞翼布局的三种方式
经典的流式布局实现方法总结(三)(圣杯布局&双飞翼布局)
tsw529的博客
02-14 985
两侧固定中间自适应的三种实现方法 1.利用bfc块级格式化上下文, 实现两侧固定中间自适应 （1）左右固定宽高，进行浮动 （2）中间 overflow: hidden; &amp;lt;style&amp;gt; .father { height: 500px; background-color: pink; } .left { float: left;...
flex布局左右两边固定，中间自适应
热门推荐
Wangdr的博客
05-21 1万+
<style> #flex{ display: flex; background-color: skyblue; height: 100px; line-height: 100px; } #left,.right{ ...
3种飞翼布局
weixin_34218579的博客
03-28 938
1.圣杯 float:left+负margin-left+ padding+relative <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
圣杯布局 双飞翼布局
最新发布
09-11
圣杯布局和双飞翼布局都是网页开发中常用的三栏布局方式。圣杯布局是一种相对布局的方法，左右两栏固定宽度，中间栏自适应宽度。而双飞翼布局与圣杯布局类似，也是左右两栏固定宽度，中间栏自适应宽度，但它在DOM结构上有所不同。 圣杯布局的DOM结构如下： ``` <div class="container"> <div class="main">Main Content</div> <div class="left">Left Sidebar</div> <div class="right">Right Sidebar</div> </div> ``` 双飞翼布局的DOM结构如下： ``` <div class="container"> <div class="content2"> <div class="main">Main Content</div> </div> <div class="left">Left Sidebar</div> <div class="right">Right Sidebar</div> </div> ``` 在双飞翼布局中，多加了一个容器`<div class="content2">`，这样可以使中间区域优先加载，同时左右侧边栏也能按照正确的顺序加载。这种布局的目的是为了解决圣杯布局中可能出现的一些问题，如背景色的覆盖等。 总的来说，圣杯布局和双飞翼布局都是为了实现网页的三栏布局，中间栏自适应宽度，左右侧边栏固定宽度。两种布局方式在DOM结构上略有不同，开发者可以根据具体需求选择适合的布局方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值