html多个div纵向排列,多个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 <