[编辑] 我尝试使用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);
}
答案 0 :(得分:1)
您可以使用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>
希望有所帮助