我有一个div #items,它包含了很多.item.我希望并排显示项目,如果它们超出页面宽度,则显示水平滚动条.
<div id="somediv"></div>
<div id="items">
<div class="item">
Item content
</div>
</div>
<div id="someotherdiv"></div>
我试过这样的东西,但它不起作用
#items{
overflow: auto;
width:100%;
height:200px; /* this is the height of each item*/
}
.item{
float:left;
}
我认为这是做到这一点的方法,但是我不能让这种方式起作用,所以我也愿意接受修正和其他方式.
解决方法
你是在正确的道路上,但你需要和额外的包装,使其工作……
<div id="scrollable">
<div id="items">
<div class="item">
Item content
</div>
</div>
</div>
然后你的CSS：
#scrollable {
overflow: auto;
width:100%;
height:200px;
}
#items {
width: 3000px; /* itemWidth x itemCount */
}
.item{
float:left;
}
