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

Question

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

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

HTML/CSS 应该是什么样子的？

Answer 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>