两个DIV盒子,划分设置静止CSS width、CSS height,放入过多的文字内容,今后看看overflow:hidden匿伏横跨内容成就,overflow:auto设置装备摆设转动条。
1、实例未设置overflow站点实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow属性实例 CSS5</title>
<style>
.exp-a,.exp-b{ float:left; width:120px; height:110px; border:1px solid #F00}
</style>
</head>
<body>
<div class="exp-a">接待脱离CSS5网!CSS5以通俗易懂知识说明注解、
案例剖析、实例树模让您轻松学习DIV+CSS构造手艺、轻松实现xhtml
标准网页重构斥地。</div>
<div class="exp-b">大家或者颠末CSS5主站上的一切收费CSS教程足可
学会DIV CSS手艺,轻松完成xhtml规范网页重构拓荒。</div>
</body>
</html>
为了看到溢出横跨宽度高度限制功效,设置装备摆设css边框技俩。
2、未设置装备摆设overflow时造诣截图

div css实例模式高出溢出功效截图
3、设置overflow后残破代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overflow属性实例 CSS5</title>
<style>
.exp-a,.exp-b{ float:left; width:120px; height:110px;
border:1px solid #F00}
.exp-a{ overflow:hidden}
.exp-b{ overflow:auto}
</style>
</head>
<body>
<div class="exp-a">欢送脱离CSS5网!CSS5以通俗易懂知识解说、案例综合、
实例树范让您轻松进修DIV+CSS组织手艺、轻松实现xhtml标准网页重构启迪。</div>
<div class="exp-b">人人大要经过CSS5主站上的一切收费CSS教程足可学会
DIV CSS手艺,轻松完成xhtml尺度网页重构开荒。</div>
</body>
</html>
4、overflow配置后实例效果截图

div css overflow实例成绩截图
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r53069.shtml








