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 - 水平翻转

回答

相关问题