div 动态显示多行多列

需要实现下列需求的画面
1 画面上有个下拉框,里面的可以选择的数值有 2,4,6,8,10,20
2 根据画面选择的数值,动态显示这么多个div元素. (可以只设置个背景色)
2 对应一行两列
4 二行二列
6 二行三列
8 二行四列
10 二行五列
20 四行五列

可以使用jquery来动态实现.要求div能够随着窗口大小自动调节,默认排满屏幕.
我只是搭了一个空的框架出来,不知道有哪位前端大侠能帮我实现以下.
我现在的空架子只是在点击按钮的时候,取得下拉框的值,放入p元素.---可以无视这段代码.

<html>

<head>

<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function() {
            $("p").html($("#s1").val());
        });
    });
</script>

</head>

<body>

<select id='s1'>

<p>This is another paragraph.</p>
<button type="button">请点击这里</button>

</body>

</html>

阅读 6.3k

<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; var percent = 80 /column + '%'; 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:300px;background-color: #00aa00;"+"width:" + percent+ ";"; rowDiv.appendChild(columnDiv); } container.appendChild(rowDiv); } } </script> </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" /> </body> </html>

div 动态显示多行多列

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？