[编辑]我尝试使用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>
希望能帮助到你
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。