html多个实心圆点横向排列,多个div横向排列

画面要求显示一定数量的div元素,比如20个

然后有一个下拉列表来指定每页显示的个数,

Case1:

如果每屏显示2个

想要的结果就是 当前屏幕显示前两个div元素和一个横向滚动条

滚动条往右拖,显示第三个和第四个

以此类推.

Case12:

如果每屏显示四个 则当前屏 是2*2显示四个和一个横向滚动条

滚动条往右拖,显示5~8个div元素.

以此类推.

特别注意:

不能出现竖的滚动条...

目前的模板代码如下, 下面的代码问题是,如果我一行追加元素多了的话,会自动换行显示,而不能显示横向滚动条.

123

function createDiv() {

var s1 = document.getElementById('s1');

var item = s1.value;

var hasChild = container.children.length ? true : false;

if (hasChild) {

while (container.hasChildNodes()) //当div下还存在子节点时 循环继续

{

container.removeChild(container.firstChild);

}

}

//制定策略

var strategy = [2, 10, 20];

var strategyRow = [1, 2, 4];

var strategyIndex = 0;

//获取策略方案

for (var index = 0; index < strategy.length; index++) {

var current = strategy[index];

if (item <= current) {

strategyIndex = index;

break;

}

}

//使用策略

//当前策略

var row = strategyRow[strategyIndex];

var column = item / row;

let bodywidth = document.body.clientWidth;

let bodyheight = document.body.clientHeight;

var percentW = 90 / column + '%';

var percentH = 90 / row + '%';

for (var i = 0; i < row; i++) {

var rowDiv = document.createElement("div");

for (var j = 0; j < column; j++) {

var columnDiv = document.createElement("div");

columnDiv.style.cssText = " margin:10px; border-style: solid; border-width: 2px; border-color: #aa0000; float:left;height:" + percentH + ";background-color: #00aa00;" + "width:" + percentW + ";";

columnDiv.textContent = i + ',' + j;

rowDiv.appendChild(columnDiv);

}

container.appendChild(rowDiv);

}

}

2

4

6

8

10

20

确定