双飞翼布局结构

最新推荐文章于 2024-04-06 01:35:23 发布

原创最新推荐文章于 2024-04-06 01:35:23 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#双飞翼布局

web前端专栏收录该内容

6 篇文章

订阅专栏

/*

*学习笔记整理

*双飞翼布局结构代码

*/

html：

<body>
	<div class="left"></div>
	<div class="right"></div>
	<div class="center">
		<div class="center_con"></div>
	</div>
</body>

//注意：三个div的顺序不能变换

css：

    <style>
		*{margin: 0px;padding: 0px;}
		body,html{ height: 100%;}
		.left{width: 100px;height: 500px;float: left;background: blue;}
		.right{width: 100px;height: 500px;float: right;background: blue;}
		.center{height:100%;padding: 0 100px;background: red;}
		.center .center_con{height: 100%;background: purple;}
	</style>