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。

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>

div中的多个div - 水平scolling

1 个答案: