特殊布局

最新推荐文章于 2022-04-23 18:36:07 发布

石倩蓉

最新推荐文章于 2022-04-23 18:36:07 发布

阅读量470

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/shiqianrongcsdn/article/details/46916297

版权

css 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

经典的一侧定宽、另一侧自动扩展的布局如何设计

</pre><pre class="html" name="code"> <style>
#content{position:relative;}
#left{width:200px;background:red;height:500px;position:absolute;}
#right{background:green;height:500px;margin-left:200px;}
 </style>

<div id="content">
<div id="left">
</div>
<div id="right">
</div>
</div>

//这种方式，在IE6下，两个div之间会有3px的空隙
<style>
#left{width:200px;background:red;height:500px;float:left;}
#right{background:green;height:500px;margin-left:200px;}
</style>

<div id="content">
<div id="left">
</div>
<div id="right">
</div>
</div>

等高布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.container{
			width:300px;
			margin:1 auto;
			border:5px solid #000;
			overflow:hidden;
		}
		.container:after{
			content:"";
			display:block;
			clear:both;
		}
		.left{
			width:100px;
			background:red;
			float:left;
			padding-bottom:1000px;
			margin-bottom:-1000px;
		}
		.right{
			width:100px;
			background:green;
			float:right;
			padding-bottom:1000px;
			margin-bottom:-1000px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="left">

		</div>
		<div class="right">
			
		</div>
	</div>
</body>
</html>

石倩蓉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
特殊布局

#content{position:relative;}#left{width:200px;background:red;height:500px;position:absolute;}#right{background:green;height:500px;margin-left:200px;} #left{width:200px;background:red;
复制链接

扫一扫