本文目录
- 怎么让超出div宽度的元素横向滚动
- 如何让html的div内容溢出后显示滚动条
- 如何设置div超过高度出现滚动条
- html中设置让div中的内容超出后自动显示滚动条
- div自动适应页面高度，多出部分出现滚动条
- css布局：div横排显示，如果太长则出现滚动条
怎么让超出div宽度的元素横向滚动
1、新建html文件。
2、创建大盒子和它的宽度。
3、创建头部盒子。
4、创建左边菜单盒子。
5、创建右边内容盒子。
6、预览效果如图。
注意事项：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
如何让html的div内容溢出后显示滚动条
为标签设置overflow属性，属性值设置为auto
当overflow属性设置为auto时，内容超出标签区域时会显示滚动条，内容少于标签区域时则不会显示
overflow: auto;
如何设置div超过高度出现滚动条
《!doctype html》
《html》
《head》
《meta charset=“utf-8“》
《title》出现滚动条《/title》
《style type=“text/css“》
div{ height:200px; width:200px; overflow-y:auto}
《/style》
《!--显示出来滚动条，用overflow-y是高度的滚动条，overflow-x是宽度滚动条,auto就是超过才显示（深圳网站建设www.sz886.com）--》
《/head》
《body》
《div》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
测试信息《br》
《/div》
《/body》
《/html》
html中设置让div中的内容超出后自动显示滚动条
在html页面中，我们有时需要让div中的内容超出后自动显示滚动条，我们可以这样设置：
代码如下:
《div
class=“classlist“》
《div
class=“autoScroll“》
《asp:RadioButtonList
ID=“rblClasses“
runat=“server“
DataTextField=“className“
DataValueField=“classID“
ForeColor=“#FF4040“》
《/asp:RadioButtonList》
《asp:ImageButton
ID=“imgSure“
runat=“server“
ImageUrl=“~/images/c_sure.jpg“
/》
《asp:ImageButton
ID=“imgClose“
runat=“server“
ImageUrl=“~/images/c_close.jpg“
/》
《/div》
《/div》
然后，样式中这样设置：
代码如下:
《style
type=“text/css“》
.classlist
{
width:
300px;
height:
20px;
}
.autoScroll
{
width:300px;
height:100px;
overflow:auto;
}
#rblClasses
{
margin-left:
20px;
}
《/style》
设置后，当radiobutton中显示的内容超出最外围的div时，将自动显示滚动条，即嵌套div
div自动适应页面高度，多出部分出现滚动条
1、首先打开hbuilder编辑器，新建一个html文件，里面写入10个列表：
2、接下来设置列表的样式，在上方的style标签中先设置ul标签的高度和宽度，并设置overflow-x属性为隐藏，这样横向的滚动条就隐藏了，overflow-y属性设置为滚动，纵向的滚动条就显示出来了，最后设置li标签，给它一个较高的高度，让li标签超出ul的高度范围就可以了：
3、最后打开浏览器，就能看到带滚动条的菜单了：
css布局：div横排显示，如果太长则出现滚动条
你这代码，本身就问题，，
《div style=“overflow:auto;width:100%“》是什么情况下出现滚动条呢？
就是在这个div里的元素宽度超出了100%后才会出现
那你的元素又用了float:left，左浮动，右浮动是什么，，就是所有用了的元素，向左浮动靠拢，它虽然是在一行，但是只是看起来在一行而已，其实因为用了float，，，浮动浮动，意思很明显，已经浮起来了，不在行内的，所以会一直向左浮动，，即使容器再小，它也是继续向左浮，，看起来就像是换了行一样。
《div style=“height:400px; width:480px;overflow-x:auto“》
《div style=“width:1200px;height:380px;background:#f00;“》《/div》
《/div》
