多个div横向排列

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

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

Case1:
如果每屏显示2个
想要的结果就是当前屏幕显示前两个div元素和一个横向滚动条
滚动条往右拖,显示第三个和第四个
以此类推.

Case12:
如果每屏显示四个则当前屏是2*2显示四个和一个横向滚动条
滚动条往右拖,显示5~8个div元素.
以此类推.

特别注意:
不能出现竖的滚动条...

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


<html>

<head>
    <title>123</title>
    <script type="text/javascript">
        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);
            }

        }
    </script>


</head>

<body id='body'>
    <select id="s1">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
    <button onclick="createDiv()">确定</button>
    <div id="container" />

</body>

</html>

css html

阅读 7.1k

2 个回答

得票最新

deleteMePlease

1543

发布于
2017-07-05

描述并不清晰.
猜你大概是要显示某些块.

2个:
x...
← - →

4个:
x...
x...
← - →

6个:
x...
x...
x...
← - →
css里需要设置禁止换行,你的某个[x]也要根据条件调整height.

zhiwei

1.4k1717

发布于
2017-07-05

多尝试自己写

<html>

<head>
  <title>123</title>
  <script type="text/javascript">
    function createDiv() {
      //假设总数
      var total = 40;

      var s1 = document.getElementById('s1');
      var item = s1.value
      var container = document.getElementById('container');

      //清楚上次的append的div
      var hasChild = container.children.length ? true : false;
      if(hasChild){
        while(container.hasChildNodes()) //当div下还存在子节点时 循环继续
        {
            container.removeChild(container.firstChild);
        }
      }

      var page = total / item;
      //控制横屏大小
      container.style.width = page * 100 + "%";
      //制定策略
      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;
      var pagePercent = 100 / page + '%';
      var percent = ((100) - column - 1) /column  + '%';
      for(var pageIndex = 0; pageIndex < page ; pageIndex++){
        var pageDiv = document.createElement("div");
        pageDiv.style.cssText="width: 100%";
        for(var i = 0; i < row; i++){
           var rowDiv = document.createElement("div");
           rowDiv.style.cssText="float: left;"+"width:"+pagePercent+";"
           for(var j = 0; j < column; j++){
             var columnDiv = document.createElement("div");
             columnDiv.style.cssText=" box-sizing: border-box;-webkit-box-sizing: border-box; float:left;height:300px;background-color: #00aa00;"+"width:" + percent+ ";";
             columnDiv.class = "column";
             columnDiv.innerHTML = pageIndex * item + i * column + j;
             rowDiv.appendChild(columnDiv);
           }
           pageDiv.appendChild(rowDiv);
        }
        container.appendChild(pageDiv);
      }


    }

  </script>
<style>
  html{
    height: 100%;
  }
  body{
    height: 100%;
    margin: 0px;
  }
  .content aside{
    display: block; height:100%; width:50px; background-color:red;
  }
  #container {
    /*width: 200%;*/
    overflow-x: scroll;
  }
  /*#container div > div{
    margin-right: 1%;
    border: 3px solid #000000;
  }
  #container div > div:first-child{
    margin-left: 1% ;
    border-left: 1% solid black;
  }*/

  /*#container div> div:nth-child(2n+1){
    margin-left: 5px ;
  }*/
</style>

</head>

<body>
  <select id="s1" >
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
  <button onclick="createDiv()">确定</button>
  <div id="container" />
  <div class="content" >
    <aside >
      <div>
        <div><div>
        <br/>
        2222
      </div>

      <div>222</div>
      <div>333</div>
    </aside>
    <div style="height: 100px;"></div>
  </div>


</body>

</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

多个div横向排列

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？