html-自适应两栏布局--小技巧 

html结构中——左右两个盒子；
    左边固定宽度，右侧宽度100%；
    为左侧盒子设置position:absolute;
    右侧盒子添加子盒，设置padding-left，属性值为左侧盒子的宽度

示例1 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应两栏布局</title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: red;

				float: left;
			}

			.box2 {
				/* width: 200px; */
				height: 200px;
				background-color: yellow;
				overflow: hidden;
				/* float: left; */
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

示例2、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应布局</title>
		<style type="text/css">
			.box1{
				position: absolute;
				
				width: 200px;
				min-height: 200px;
				background-color: #00498B;
			}
			.box2{
				width: 100%;
				min-height: 200px;
				background-color: #008000;
			}
			.box{
				padding-left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box1">left</div>
		<div class="box2">
			<div class="box">right</div>
		</div>
	</body>
</html>

 

posted @ 2023-04-02 21:20  JackieDYH  阅读(28)  评论(0)  编辑  收藏  举报  来源