2.3双飞翼布局

最新推荐文章于 2025-06-03 09:19:53 发布
最新推荐文章于 2025-06-03 09:19:53 发布
阅读量379 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML+CSS 文章标签： 双飞翼布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010502101/article/details/83019536
本文详细解析了一种称为双飞翼的网页布局方法，通过使用浮动和负边距技巧，实现了左右两侧固定宽度，中间自适应宽度的三栏布局效果。此布局方式适用于创建响应式网页设计，能够保持页面元素在不同屏幕尺寸下的美观和功能性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

圣杯布局的改进版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				min-width: 600px;
			}
			
			/*头部脚部样式*/
			#header, #footer{
				border: 1px solid;
				background: gray;
				text-align: center;
			}
			
			#content .middle, #content .left, #content .right{
				height: 50px;
				line-height: 50px;
				float: left;
			}
			
			/*双飞翼布局*/
			#content{
				/*margin: 0 200px;*/
				overflow: hidden;
			}
			
			#content .middle{
				background: pink;
				width: 100%;
			}
			
			#content .middle .inner{
				padding: 0 200px;
			}
			
			#content .left, #content .right{
				background: yellow;
				width: 200px;
				text-align: center;
			}
			
			#content .left{
				margin-left: -100%;
			}
			
			#content .right{
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<h4>header</h4>
		</div>
		<div id="content">
			<div class="middle">
				<div class="inner">丁香一样的芬芳</div>
			</div>
			<div class="left">丁香一样的颜色</div>
			<div class="right">丁香一样的忧愁</div>
		</div>
		<div id="footer">
			<h4>footer</h4>
		</div>
	</body>
</html>

在这里插入图片描述

2022-09-01 什么是双飞翼布局?什么是圣杯布局?如何实现双飞翼布局和圣杯布局?它们有什么区别?
GAARA
09-01 197
一.圣杯布局 1.圣杯布局的效果和要求 效果 要求 2.圣杯布局的实现方式[重要] 2.1.使用浮动实现圣杯布局 思路 代码 效果 2.2.使用弹性盒实现圣杯布局 思路 代码 效果 2.3.使用定位实现圣杯布局 思路 代码 2.4.使用网格布局grid实现圣杯布局 思路 代码 二.双飞翼布局 1.双飞翼布局的效果和要求 效果 要求 2.圣杯布局和双飞翼布局的区别[重要] 一.圣杯布局 1.圣杯布局的效果和要求 效果 在这里插入图片描述 要求 头部和底部固定高度,宽度占100% 中间的container是一
【CSS】看了C站优快云源码，这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding
YK菌的博客
07-06 452
双飞翼布局 圣杯布局
双飞翼布局详解
dyb2440492276的博客
03-21 6324
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 双飞翼布局为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。 css代码： .header,.footer{ height: 200px; width: 100%; background-color: #0000FF; }
双飞翼布局
michael_linux的博客，一个小小小学生。滴水穿石，步步为营，只为那刹那芳华。
06-17 519
1、 <div class="container"> <div class="middle"> dfgdsfgfddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddd我来 了史蒂芬孙的方式地方都是福斯的我来了史蒂芬孙的方式 地...
《前端面试题：前端布局全面解析（圣杯布局、双飞翼布局等）》
最新发布
前端码农的博客
06-03 926
本文全面解析了前端布局技术的演进过程，从传统的表格、浮动和定位布局，到现代的Flexbox和Grid布局。
2020-12-13
qq_45688556的博客
12-13 207
双飞翼布局 两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型经典布局方案 1、三个容器在一排，所以我们可以使用浮动布局 2、中间的自适应，我们可以让其占一整行，然后让子元素通过margin居中来自适应 3、后面橘黄色的元素，要放在最前面，移动了是绿色元素父容器的宽度，向左平移，所以设置负值4后面蓝色的元素，要放在最后面，根据浮动贴边特性，只需要向前移动蓝色盒子的宽度即可 简化版（固比固布局)︰就是中间自适应，左右固定，所以可以并列三个元素，前面两个脱离文档流(浮动)，一左一
近程无人机平台技术体系
feverfew1的博客
05-15 1332
固定翼无人机是无人机（UAV）的一种，它依靠固定在机身上的翅膀产生升力，通过动力系统推进前进。与多旋翼无人机和垂直起降（VTOL）无人机相比，固定翼无人机通常具有更长的航程、更快的飞行速度和更好的载荷能力。机翼：主要负责提供维持飞行器飞行的升力，并保持模型飞机飞行时的横侧安定。机翼上可以操纵发生偏转的部分叫做舵面，操纵飞机发生滚转的舵面叫做副翼（Aileron），部分飞机可能有额外的用于增升的后缘襟翼（Flap）或前缘缝翼（Slat），用于减速增阻的扰流板（Spoiler）。尾翼。
CSS入门学习笔记+案例
m0_67390379的博客
03-03 366
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值