具有动态元素的水平滚动体
具有动态元素的水平滚动体
提问于 2013-12-19 17:16:27
我有将出现在屏幕扩展名中的平方元素。
这些元素是动态的，我有2，而我有50。取决于屏幕的大小和我有多少个元素，我将有一个溢出。当这种情况发生时，我想要显示一个水平滚动。
跟着我试过的小提琴这里
守则：
HTML
<div class="wrap-poltrona">
<div class="poltrona"></div>
<div class="poltrona"></div>
...
<div class="poltrona"></div>
<div class="poltrona"></div>
</div>CSS
.wrap-poltrona{
}
.poltrona{
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 5px;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-19 17:26:49
使用inline-block而不是float，在CSS上添加以下内容：
.wrap-poltrona{
white-space:nowrap;
overflow:auto;
}
.poltrona{
display:inline-block;
}演示http://jsfiddle.net/M5X3a/2/
Stack Overflow用户
发布于 2013-12-19 17:27:39
另一个想法是有一个视图和一个足够长的div来容纳所有的对象。
HTML：
<div class="viewport">
<div class="wrap">
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
</div>
</div>CSS：
.viewport {
width: 100%;
height: 100px;
overflow: auto;
}
.wrap {
width: 1000000px;
}
.object {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 5px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20687790
复制相关文章
相似问题
腾讯云开发者
