Question

我已将平方元素连续显示在屏幕扩展名上。

这些元素是动态的，然后我有2，因为我有50.根据屏幕的大小和我有多少元素我将有溢出。当发生这种情况时，我想显示一个水平滚动。

跟随here我试过的小提琴

代码：

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;
}

Answer 1

使用inline-block代替float，在CSS上添加：

.wrap-poltrona{
  white-space:nowrap;
  overflow:auto;
}
.poltrona{
  display:inline-block;
}

演示http://jsfiddle.net/M5X3a/2/

Answer 2

另一个想法是拥有视口和足够长的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;
}

水平滚动与动态元素

2 个答案: