当前位置：首页 → 问答吧 → 求，控制内层div宽度，宽度随之变大，并出现滚动条。

求，控制内层div宽度，宽度随之变大，并出现滚动条。

时间：2011-09-09

来源：互联网

求，外层div控制内层div宽度代码，内层DIV里面的内容增加，宽度随之变大，并出现滚动条。
我试过外层div设置宽度100% 内层设置固定宽度，但是内容增加，宽度不随之变大。

作者: xingyundex 发布时间: 2011-09-09

overflow-x:auto;
overflow-y:auto;
可以控制横向和纵向的滚动条显示

作者: alphat 发布时间: 2011-09-09

外层div设置好宽度，然后限制overflow-x:scroll，内层div宽度设置width:auto就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> * { margin:0; padding:0;} .outerDiv { width:400px; height:400px; margin:0 auto; border:10px solid #666; overflow-y:hidden; overflow-x:scroll;} .innerDiv { width:auto; height:400px; white-space:nowrap;} </style> </head> <body> <div class="outerDiv"> <div class="innerDiv">文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 CheneyHu 于 2011-9-9 11:46 编辑 ]

作者: CheneyHu 发布时间: 2011-09-09

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
.outerDiv { width:400px; height:400px; margin:0 auto; border:10px solid #666; overflow-y:hidden; overflow-x:scroll;}
.innerDiv { width:auto; height:400px; white-space:nowrap;}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv">文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长文字内容很长很长</div>
</div>
</body>
</html>

作者: CheneyHu 发布时间: 2011-09-09

求，控制内层div宽度，宽度随之变大，并出现滚动条。

代码:

热门阅读

热门下载