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

最新推荐文章于 2024-01-29 11:09:57 发布

wj18740503137

最新推荐文章于 2024-01-29 11:09:57 发布

阅读量1.1k

点赞数

文章标签： html css

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

版权

一，浮动：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>

运行效果如图所示：

以上效果仅显示auto自动添加滚动条；其它两个效果可以自己尝试；

wj18740503137

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DIV+CSS布局（溢出和浮动）

一，浮动：float浮动属性；right 左；left 右；用来定义div页面的布局具体代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> 浮动和溢出</title> <style type="text/css"> .div{ width: 960px; height: 900px;
复制链接

扫一扫