62,046
社区成员
发帖
与我相关
我的任务
分享Div中放不下如何出现横向滚动条,然后一直排过去。
先上代码
StyleSheet.css
aspx file
以上代码只能出现纵向滚动条，而且还不能完全在container中完全显示。
我想让这banner3个div在container中横向排，然后出现横向滚动条，谢谢！
最好能有完整的小Demo.
StyleSheet.css
#container
{
width: 800px;
margin: 0 auto;
height: 20px;
background-color: #ccc;
overflow: auto;
}
.banner
{
margin-left: 5px;
width: 300px;
height: 20px;
background-color: Fuchsia;
float: left;
}
aspx file
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div class="banner">
123
</div>
<div class="banner">
123
</div>
<div class="banner">
123
</div>
</div>
</form>
</body>
以上代码只能出现纵向滚动条，而且还不能完全在container中完全显示。
我想让这banner3个div在container中横向排，然后出现横向滚动条，谢谢！
最好能有完整的小Demo.
...全文
请发表友善的回复…
发表回复
u014012017 2015-10-19
- 打赏
- 举报
楼主太棒了，这问题就解决了，但是原理还有点模糊，好像是如果两个或者以上子div的长度超过了父div就一定会排到下面
sp11234 2013-01-31
- 打赏
- 举报
#container
{
width: 1800px; //width改大一点就行
margin: 0 auto;
height: 40px;
background-color: #ccc;
overflow-x:scroll;
overflow-y:hidden;
}
mssage 2013-01-30
- 打赏
- 举报
搞定，外面还要再套一层DIV。
#container
{
width: 800px;
margin: 0 auto;
height: 40px;
background-color: #ccc;
overflow-x: scroll;
}
#subcontainer
{
width: 920px;
}
.banner
{
margin-left: 5px;
width: 300px;
height: 20px;
background-color: Fuchsia;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="container">
<div id="subcontainer">
<div class="banner">
123
</div>
<div class="banner">
123
</div>
<div class="banner">
123
</div>
</div>
</div>
</form>
</body>
mssage 2013-01-30
- 打赏
- 举报
你试过没？我这不OK。你那边OK？
夜色镇歌 2013-01-30
- 打赏
- 举报
overflow:scroll; /* x y都出现滚动条 */
overflow-x:scroll;/* x出现滚动条*/
overflow-y:scroll;/* y出现滚动条*/
