我有两个div。外部div的名称是scroll_main,内部div是scroll_holder。外部div的宽度为750px,溢出设置为auto。在内部div中,我添加了一些具有固定宽度和高度的div并向左浮动。所以我想让内部div的宽度自动,以便内部的所有包含div显示在一行中。我想从左向右滚动。可能吗?感谢
这是html
<div class="scroll_main">
<div class="scroll_holder">
<div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
<div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#ccc; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#22b1b5; float:left;margin:10px"></div>
<div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div>
<div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div>
</div>
</div>
这是我试图申请的CSS
.scroll_main {
height: 450px;
margin: 0 auto;
max-width: 97%;
overflow: auto;
position:relative;
width:750px
}
.scroll_holder{overflow:hidden; margin:5px; width:750px; overflow:auto }
答案 0 :(得分:1)
here我认为您正在寻找(虽然尺寸较小):
#images {
overflow-y:hidden;
overflow-x:scroll;
height:80px;
width:150px;
border:solid 1px #c4c4c4;
}
#images2
{
width:300px;
}
#images img
{
display:block;
padding:5px;
cursor:pointer;
float:left;
}
this演示了使用此css的另一种技术:
div {
overflow:hidden;
}
#frame {
width:600px;
padding:8px;
border:1px solid black;
}
#thumbnails_container {
border:1px solid black;
padding:4px;
overflow-x:scroll;
height:200px;
}
.thumbnail {
border:1px solid black;
margin-right:4px;
width:100px; height:75px;
float:left;
}
.thumbnail img {
width:100px; height:710px;
}
如果您将缩略图用于图像,也可以使用缩略图。
另一种选择是使用no-wrap
来阻止div包装
答案 1 :(得分:0)
<强> CSS 强>
.scroll_main {
height:450px;
margin:0 auto;
max-width:97%;
overflow:auto;
position:relative;
width:750px
}
.scroll_holder{
margin:5px;
white-space:nowrap;
}
.scroll_holder div {
float:none !important;
display:inline-block;
}
答案 2 :(得分:-1)
关于样式属性 overflow-y 和 overflow-x 的研究,尽量避免使用DIV一个固定的宽度或高度绝对位于DIV内,具有自动或可变宽度或高度,没有最小高度或定义,DIVS将不会出现在某些浏览器中(Internet Explorer):)