DIV+CSS布局（溢出和浮动）

最新推荐文章于 2024-09-13 15:18:19 发布

wj18740503137

最新推荐文章于 2024-09-13 15:18:19 发布

阅读量1.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/wj18740503137/article/details/108944382

版权

本文介绍了CSS中的浮动属性，通过left和right实现页面布局，并展示了如何利用overflow属性处理内容溢出的问题，包括hidden隐藏内容、auto自动添加滚动条和scroll始终显示滚动条的示例。通过这些技巧，可以更好地管理和展示网页内容。

摘要由CSDN通过智能技术生成

一，浮动：float浮动属性；right 左；left 右；

用来定义div页面的布局

具体代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>	浮动和溢出</title>
		<style type="text/css">
			.div{
				width: 960px;
				height: 900px;
				background-color: antiquewhite;
				margin: 0 auto; /* 居中 */
			}
			.left{width: 300px;
			 height: 600px;
			 background-color: #FF0000;
			 float: left;}
			 .right{width: 660px;
			  height: 600px;
			  background-color: blue;
			  float: left;}
			  .bottom{width: 960px;
			   height: 300px;
			   background-color: greenyellow;
			   float:right;}
			</style>
	</head>
	<body>
		<div class="div">
			<div class="left">
			</div>
			<div class="right"></div>
			<div class="bottom"></div>
		</div>
	</body>
</html>

运行结果如图所示：

二，溢出；

溢出问题就是div容器较小文本内容太多出现内容溢出；如图所示：

overfllow溢出处理 hidden隐藏溢出内容 auto根据文本自动添加滚动条 scroll无论内容是否出层都添加滚动条；

具体代码如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.yi{
				width: 200px;
				height: 100px;
				background-color: antiquewhite;
				  overflow: auto;  /* hidden隐藏溢出内容  auto根据文本自动添加滚动条 scroll无论内容是否出层都添加滚动条*/
				
			}
		</style>
	</head>
	<body>
		<div class="yi">
			麦子学院麦子麦子学院麦子学院麦子学院学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院
			麦子学院麦子学院麦子学院学院麦子学院麦子学院麦子学院麦子学院麦子学院麦子学院
		</div>
	</body>
</html>