float实现圣杯布局

最新推荐文章于 2024-09-01 13:33:34 发布

Seven_Ting

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量108

点赞数

文章标签：微信 javascript

本文链接：https://blog.csdn.net/Seven_Ting/article/details/129469284

版权

<template>
	<view class="body">
		<view id="header">this is header</view>
		<view id="container">
			<view id="center" class="column">this is center</view>
			<view id="left" class="column">this is left</view>
			<view id="right" class="column">this is right</view>
		</view>
		<view id="footer">this is footer</view>
	</view>
</template>

.body {
		min-width: 550px
	}

	#header {
		background: #f1f1f1;
		text-align: center;
	}
	#container .column{
		float: left;
	}
	#container{
		padding: 0 150px 0 200px;
	}
	
	#center {
		background: #ccc;
		width: 100%;
	}

	#left {
		position: relative;
		right: 200px;
		background: yellow;
		width: 200px;
		margin-left: -100%;
	}

	#right {
		background: red;
		width: 150px;
		margin-right: -150%;
	}

	#footer {
		background: #f1f1f1;
		text-align: center;
		clear: both;
	}