一个 div 中的多个 div — 水平滚动

【问题标题】：Multiple divs within a div — horizontal scolling一个 div 中的多个 div — 水平滚动
【发布时间】：2015-05-24 19:21:08
【问题描述】：

我有一个类似于之前问过的问题 Horizontal Scrolling? 和 Horizontal scroll in DIV with many small DIV's inside (no text).

但另一个限制是我将以编程方式添加div，并且可能不知道每个div 的大小。这种情况下是否可以实现横向滚动？

HTML/CSS 的外观应该如何？

【问题讨论】：

请提供您的代码以及您到目前为止所做的工作。到目前为止，您刚刚向我们提供了有关为什么您的问题与另一个问题不重复的信息
确实如此。这个有什么不同？
下面的片段回答了我的疑问。我没有添加代码主要是为了简洁。谢谢大家的时间！

标签： jquery css

【解决方案1】：

此示例中的按钮将插入一个具有随机宽度的新 div，最终导致水平滚动。兴趣点：容器上的white-space: nowrap 和overflow: scroll； display: inline-block 在子 div 上。

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>

【讨论】：