三栏布局的6种实现方式

最新推荐文章于 2024-09-18 21:21:47 发布

此雪宝宝非彼

最新推荐文章于 2024-09-18 21:21:47 发布

阅读量583

点赞数

分类专栏： CSS 文章标签： CSS 三栏布局布局

本文链接：https://blog.csdn.net/weixin_43254265/article/details/83421826

版权

本文介绍了六种实现三栏布局的方法，包括浮动布局、双飞翼布局、绝对定位、flexbox布局、表格布局和网格布局，详细解析了每种方法的实现原理和应用场景。

摘要由CSDN通过智能技术生成

1.利用浮动

	<section class="layout float">
		<style type="text/css">
		.layout article div {
   
			height: 100px;
		}
		.layout.float .left {
   
			float: left;
			width: 300px;
			background: red;
		}
		.layout.float .right {
   
			float: right;
			width: 300px;
			background: blue;
		}
		.layout.float .center {
   
			background: yellow;
			margin: 0 300px;
		}
		</style>
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
		</article>
	</section>

2.双飞翼布局

	<section class="layout double">
		<style type="text/css">
			.layout article div {
   
				height: 100px;
			}
			.layout.double .left-center-right {
   
				overflow: hidden;
			}
			.layout.double .center {
   
				width: 100%;
				float: left;
				background: yellow;