2.3双飞翼布局

清疚 2022-05-08 12:46 189阅读 0赞

圣杯布局的改进版

<!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>

![在这里插入图片描述][70]

[70]: /images/20220508/c5393a044e724cd19dcf6cd3bcbe5968.png

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关双飞翼布局

<style> * { margin: 0; padding: 0; ...

忘是亡心i/ 2024年04月19日 11:33/ 0 赞/ 71 阅读

相关圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应中间部分在 DOM 结构上优先，以便先行渲染允许三

小咪咪/ 2022年12月29日 04:57/ 0 赞/ 181 阅读

相关 css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 [《In Search of the Holy Grail》][In Search of

客官°小女子只卖身不卖艺/ 2022年12月06日 04:18/ 0 赞/ 174 阅读

相关 [CSS]双飞翼布局

题目要求： 1.分为三个部分，左中右，先加载中间 2.左右宽为200px，中间自适应答案源码： <!DOCTYPE html> <html lan

电玩女神/ 2022年11月26日 05:59/ 0 赞/ 162 阅读

相关 CSS双飞翼布局实例

<!doctype html> <html> <head> <meta charset="utf-8"> <title>双飞翼布局</t

深碍√TFBOYSˉ_/ 2022年09月25日 06:22/ 0 赞/ 169 阅读

相关 css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第

淩亂°似流年/ 2022年05月29日 12:35/ 0 赞/ 249 阅读

相关圣杯布局和双飞翼布局

圣杯布局与双飞翼布局 -------------------- 圣杯和双飞翼布局都是左右两边固定中间自适应，都是 `负margin`的应用。圣杯布局 -

淩亂°似流年/ 2022年05月21日 02:45/ 0 赞/ 241 阅读

相关圣杯布局和双飞翼布局

圣杯布局圣杯布局就是三栏布局，其中左右两栏固定宽度，中间部分自适应主要步骤： 1. 在html中，中间的块在最前面，后面紧跟左边的块和右边的块 2. 三者均

Bertha 。/ 2022年05月13日 05:24/ 0 赞/ 249 阅读

相关 2.3双飞翼布局

圣杯布局的改进版 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

清疚/ 2022年05月08日 12:46/ 0 赞/ 190 阅读

相关双飞翼布局

[圣杯布局][Link 1] [圣杯+伪等高][Link 2] 目录第一步第二步第三步第四步全部代码双飞翼布局+伪等

迷南。/ 2021年08月28日 20:22/ 0 赞/ 376 阅读