响应式布局-v1.0

最新推荐文章于 2024-10-30 23:01:31 发布

原创最新推荐文章于 2024-10-30 23:01:31 发布 · 411 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #响应式 #布局

CSS 专栏收录该内容

5 篇文章

订阅专栏

中间区域右侧宽为200px，左侧随窗口大小调整，直接上图，达到效果如下：

相应的代码：

<style>
	.header {
		height: 60px;
		border: 1px solid green;
		padding: 10px;
		position: relative;
		margin-bottom: 10px;
	}
	.logo {
		width: 60px;
		height: 60px;
		border: 1px solid red;
		float: left;
	}
	.user {
		width: 100px;
		height: 30px;
		border: 1px solid black;
		float: right;
		bottom: 10px;
		right: 10px;
		position: absolute;
	}
	.wrap:after {
		clear: both; 
		content: '';
		display: block;
	}
	.content-out {
		width: 100%;
		float: left;
		margin-left: -202px;
	}
	.content {
		height: 300px;
		border: 1px solid blue;
		margin-left: 202px;
		margin-right: 10px;
	}
	.aside {
		width: 200px;
		height: 300px;
		border: 1px solid red;
		float: right;
	}
	.footer {
		height: 40px;
		border: 1px solid black;
		margin-top: 10px;
	}
</style>

<div class="header">
	<div class="logo">Logo</div>
	<div class="user">用户名</div>
</div>
<div class="wrap">
	<div class="content-out">
		<div class="content">content - 自适应宽度</div>
	</div>
	<div class="aside">aside - 定宽200px</div>
</div>
<div class="footer">footer</div>