CSS双飞翼布局

时间 2019-11-06

标签 css 双飞布局栏目 CSS 繁體版

原文原文链接

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

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微信

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