CSS/AngularJS溢出-x

Question

我需要一些css幫助。你可以看到，如果你點擊右邊添加另一個六邊形，我希望它溢出到右邊。它跳下來創建一個新的行。我怎樣才能讓它溢出滾動x？

這是css。

#flow { 
    width: 600px; 
    height: 250px; 
    overflow-x: scroll; 
} 

Answer 1

這可能不是最完美的解決方案，但似乎這樣的伎倆。 http://jsfiddle.net/L6pke/5/

#container { 
    width: 500px; 
    height: 250px; 
    overflow-x: auto; 
} 
#flow { 
    width: 800px; 
    height:100%; 
} 

而在你的JS代碼，你每次添加一個元素時更新流動div的寬度。

var flow = document.getElementById('flow'), 
      current_width = flow.clientWidth; 
flow.style.width = current_width + 104 + 'px'; 

Answer 2

試試這個：

#flow { 
    width: 550px; 
    height: 250px; 
    overflow-x: scroll; 
} 

.hex { 
    display: inline-block; 
    margin-left:3px; 
    margin-bottom:-26px; 
    text-align:center; 
    color:#fff; 
    font-size:1.1rem 
} 

.hex-row { 
    clear:left; 
    white-space: nowrap; 
} 

基本上是：

讓.hex顯示爲inline-block，優於浮動爲此，除了與浮它不會起作用，因爲從正常流量浮動移除了。

刪除.hex-row中的寬度以使其自動化，並將white-space: nowrap添加到其中以刪除包裝。

http://jsfiddle.net/zargyle/L6pke/3/