我有一个与之前在这里问过的问题类似的问题 Horizontal Scrolling?和 Horizontal scroll in DIV with many small DIV's inside (no text) .
但一个额外的限制是我将以编程方式添加 div
并且可能不知道每个 div
的大小。
这种情况下是否可以实现水平滚动?
HTML/CSS 应该是什么样子的?
最佳答案
此示例中的按钮将插入一个具有随机宽度的新 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>
关于jquery - 一个 div 中的多个 div——水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30427385/