关于两列布局和三列布局

最新推荐文章于 2022-05-25 15:03:17 发布

若子虚

最新推荐文章于 2022-05-25 15:03:17 发布

阅读量528

点赞数

分类专栏： WEB前端文章标签： HTML CSS WEB前端

本文链接：https://blog.csdn.net/u012311697/article/details/44580633

版权

WEB前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.两列布局（两列定宽）：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
#left{
	width: 200px;
	height: 500px;
	background-color: #1b66ef;
	float: left;
}
#right{
	width: 800px;
	height: 500px;
	background-color: #3e1bef;
	float: left;
}
</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
</body>
<html>

2.两列布局（左边定宽右边自适应）：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
#left{
	position: absolute;
	width:200px;
	height: 500px;
	background-color: #1b66ef;
}
#right{
	position: absolute;;
	left:200px;
	right: 0;
	height: 500px;
	background-color: #3e1bef;
}
</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
</body>
</html>

右边自适应的关键是<div id="#right"></div>需要根据屏幕的尺寸而自动适应宽度。

实现的关键为：1.绝对定位（因为使用了绝对定位所以不需要使用浮动float）

2.left:200px;为<div id="#left"></div>的宽度使两个div层不重叠

3.right:0;这样就把右边的<div id="#right"></div>给“撑”开了

3.三列布局（左右定宽中间自适应)：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
#left{
	position: absolute;
	width: 200px;
	height: 500px;
	background-color: #1b66ef;
}
#mid{
	position: absolute;;
	left: 200px;
	right: 200px;
	height: 500px;
	background-color: #3e1bef;
}
#right{
	position: absolute;
	right: 0;
	width: 200px;
	height: 500px;
	background-color: #1b66ef;
}
</style>
</head>
<body>
	<div id="left"></div>
	<div id="mid"></div>
	<div id="right"></div>
</body>
</html>

实现方法与两列布局（左边定宽右边自适应）类似。