CSS/AngularJS溢出-x

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

這是css。

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

來源

2014-01-30 Zack Argyle

這可能不是最完美的解決方案，但似乎這樣的伎倆。 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';

來源

2014-01-30 02:59:04

工程很棒。萬分感謝。 –

不客氣。看起來像一個很酷的項目！祝你好運！ –

所以我最終在'流'中使用ng樣式，使它更像這樣的角度。 ng-style =「setWidth（）」，並在控制器中$ scope.setWidth = function（）{return {width：$ scope.things.length * 135 +「px」};}它的效果很好。再次感謝。 –

試試這個：

#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/

來源

2014-01-30 02:48:51 GGalizzi

CSS/AngularJS溢出-x

回答

相關問題