帶有動態元素的水平滾動

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