div內的多個div - 水平翻轉

我有一個類似於此處詢問的問題 Horizontal Scrolling?和 Horizontal scroll in DIV with many small DIV's inside (no text)。div內的多個div - 水平翻轉

但是另一個限制是我將以編程方式添加div並且可能不知道每個div的前面的大小。在這種情況下是否可以實現水平滾動？

HTML/CSS應該如何顯示？

來源

2015-05-24 Player

請提供你的代碼，你到目前爲止做了什麼。現在，您剛剛向我們提供了有關您的問題爲什麼不是另一個重複的信息 –

的確。這個有什麼不同？ –

下面的代碼段回答了我的問題。我沒有添加代碼，主要是爲了簡潔。謝謝大家！ – Player

在這個例子中的按鈕將插入一個隨機寬度的新div，最終導致水平滾動。興趣點：容器上的white-space: nowrap和overflow: scroll; display: inline-block對孩子divs。

var container = document.getElementById('items'); 
 

 
function addItem() { 
 
    var d = document.createElement('div'); 
 
    d.style.width = Math.floor(Math.random() * 100) + 20 + 'px'; 
 
    container.appendChild(d); 
 
}

#items { 
 
    white-space: nowrap; 
 
    overflow:scroll; 
 
} 
 

 
#items div { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    height: 50px; 
 
}

<button onclick="addItem()">Add Item</button> 
 

 
<div id="items"></div>

來源

2015-05-24 19:31:41 ray

完美的工作！ – Player

div內的多個div - 水平翻轉

回答

相關問題