[编辑] 我尝试使用 setTimeout 方法每 1 秒动态创建 6 条水平线。所以它应该每 1 秒将每 6 条水平线显示为一组。在这里，我将 6 条水平线称为组。但是，我想水平而不是垂直附加每个组。当尝试追加一个组并且边框的宽度不足以容纳新组时，将新组追加到下一行。而且我还想要在每组 6 条水平线之间有一个“支柱”，我只想创建 8 组水平线。下面的第一张图片是我运行代码后得到的。第二个是我需要的。下面的代码是我的 html、css 和 js 代码。希望有人能帮助我。先感谢您。
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
</body>
</html>
CSS:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-right: 20px;
}
#output {
background: #ffe6e6;
width: 600px;
height: 800px;
position:absolute;
}
js:
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$('#output').append(hr);
}
makeTable(function() {
if(++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}
最佳答案
您可以使用 display:flex 来获得您期望的输出
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
var output = $("#output");
var div = $("<div></div>");
div.attr('id', order);
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$(div).append(hr);
}
output.append(div);
makeTable(function() {
if (++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left: 0px;
margin-bottom: 10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-left: 10px;
}
#output div:nth-child(2n+1) {
border-right: 5px solid green;
margin-top: 5px;
}
#output div:nth-child(2n) {
border-right: 5px solid green;
margin-top: 5px;
height: auto;
}
#output {
display: flex;
flex-wrap: wrap;
}
#output {
background: #ffe6e6;
width: 500px;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">
</div>希望对你有帮助
关于javascript - 关于分组和附加 div 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40751569/