CSS双飞翼布局

最新推荐文章于 2024-04-07 21:56:11 发布
最新推荐文章于 2024-04-07 21:56:11 发布
阅读量79 收藏
点赞数
原文链接：https://juejin.im/post/5cd47d5651882535b86a631a
版权

此CSS是为了实现三列布局：左右固定，中间自适应；且浏览器会自上而下先出现中间部分。

html:
复制代码
<body>
<!-- 使得浏览器先出来center -->
<div class="box">
	<div class="center">
		<!-- 创建一个div 开造 -->
		<div class="inner"></div>
	</div>
	<div class="left"></div>
	<div class="right"></div>
</div>
复制代码
CSS:
复制代码
<style>
	.box {
		width: 100%;
		height: 300px;
		background: darkblue;
		margin: 0 auto;
	}

	.center {
		width: 100%;
		height: 100%;
		float: left;
	}

	.inner {
		/* width: 100px;
		height: 100%;
		background: darkmagenta; */
		margin: 0;
	}

	.left {
		width: 100px;
		height: 100%;
		background: darkgoldenrod;
		float: left;
		margin-left: -100%;
	}

	.right {
		width: 100px;
		height: 100%;
		background: darkred;
		float: left;
		margin-left: -100px;
	}
</style>
复制代码

最后效果出来是这样的

据说认真阅读并点赞的你，代码敲的最6哦~ 有兴趣的小伙伴可以加我微信，一起讨论；V-x: dandanshen987

##有一天，当你明白"小白" +"勤奋"的时候，你就会成为大牛##

转载于:https://juejin.im/post/5cd47d5651882535b86a631a

weixin_33937499
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
双飞翼布局（css）
Y0admin的博客
10-27 2008
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>
CSS之实现双飞翼布局和圣杯布局的三种方式
qq_45907365的博客
04-27 160
以上就是今天要讲的内容。
CSS实现圣杯布局（双飞翼布局）的四种方式
一个普通人的博客
08-29 1246
总结了原生JS实现圣杯（双飞翼）布局的四种方式
HTML5中margin属性应用
大数据-攻城狮
12-09 6556
Document div{ width: 100px; height: 100px; background-color: red; /* 外边距 */ margin-top: 30px; margin-left: 100px; margin-right: 100px;
css---双飞翼和圣杯布局
追梦的女孩博客
05-27 538
双飞翼、圣杯布局 概念:都是侧边两栏宽度固定，中间栏宽度自适应。 用处:解决中间部分被挡住的问题。 圣杯布局: 双飞翼布局:双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。 圣杯布局:在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative。 双飞翼实现代码 <!DOCTYPE html> <html> <head&
【CSS如何实现双飞翼布局】
前端-CV全粘工程师
10-02 476
它的主要特点是左右两列是浮动的，中间一列使用margin负值来达到“自适应”的效果。中间的.content设置一个margin-left和margin-right，确保其在左右两侧预留200px的空间，以容纳左右两列的内容。通过上面的代码，我们得到的效果是一个完整的双飞翼布局。左右两列的宽度固定，中间的列根据页面的宽度自适应，并且不需要使用嵌套的div来实现。.left、.right设置为float:left，使其能够在文档流中脱离，并设置为固定宽度，分别为200px。
css双飞翼布局方式
oops
05-21 316
css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小 这里有四种方式可以实现 一、利用浏览器加载顺序 将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
weixin_30394975的博客
06-11 1035
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样一样的。圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%圣杯布局*{margin: 0;padding: 0;box-sizing: border-box;}.clearfi...
css双飞翼布局、圣杯布局与左侧宽度固定右侧自适应布局
最新发布
weixin_50488897的博客
04-07 709
与双飞翼布局类似,但是顶端header和底端footer各自占据屏幕所有宽度,高度固定。/* 绝对定位会让元素脱离文档流进入浮动层,右侧元素能无视掉它 */代码实现跟双飞燕布局类似,只是加了个header和footer而已。/* 将margin-left设置为left盒子的宽度 *//* ::after伪元素清除浮动,解决父级塌陷问题 */左右宽度固定,中间宽度自适应,且要先渲染中间。
CSS双飞翼布局的两种方式实现示例
12-30
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... <body> <div class=wrap> <div class=div1></div> <div class=div2></div> <div class=div3></div> </div> </body> ... *{ //先简单粗暴的解决一下浏览器的默认样式 margin
css中的flex布局细节总结，如何用5行核心代码实现双飞翼
chloexxx的博客
03-31 458
双飞翼模型一般是左右两侧宽度固定，中间内容部分宽度自适应。双飞翼模型一般把内容部分，即mid，放在第一个定义，可以使得在dom树构建时先加载内容部分，用户体验更好。可以说是强迫症福音，flex可以轻松实现等间距的整齐排列，且父级盒子自行撑开不会塌陷。就是所谓的弹性布局，比较灵活。就是与之垂直的方向。两个轴主要是用来确定元素排列的方向。主要按照该属性定义在父级元素样式中or子级元素样式中。是默认值，表示主轴为水平方向。此时子元素水平排列。此时子元素垂直排列。给定一个body结构，对此进行flex布局。
day011:CSS如何实现双飞翼布局？
杨兴元的博客
10-21 157
day011:CSS如何实现双飞翼布局？有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。<!DOCTYPE html> &...
css经典布局——双飞翼布局
热门推荐
越努力，越幸运！
01-18 3万+
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1394
Document
CSS中经典的双飞翼布局(
liwusen的博客
05-09 5650
经典的兼容性好的双飞翼布局，中间列自适应，左右两列固定宽度的布局，如何实现，以及优点等
CSS经典布局之双飞翼布局
杰希默克的博客
09-06 655
双飞翼布局始于淘宝UED。 双飞翼布局主要解决两个问题： 1、三列式布局，左右宽度固定，中间宽度自适应； 2、中间栏在浏览器中有限展示渲染。中间栏在浏览器中先加载比较好实现，浏览器会按照html文档中的顺序渲染，所以只需要把中间列写在前边就可以了。 如下面所示： HTML<div class="page"> <div class="col-main">主列</div> <d
CSS圣杯布局 && 双飞翼布局
颠覆我的整个世界，只为摆正你的身影
01-28 963
两者作用和区别： 圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染 区别： 两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。 圣杯布局是通...
帮我写一段代码说明css 双飞翼布局和圣杯布局
03-23
当然可以，以下是 CSS 双飞翼布局和圣杯布局的代码示例： CSS 双飞翼布局： HTML 代码： ``` <div class="left"></div> <div class="content"></div> <div class="right"></div> ``` CSS 代码： ``` ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值