Question

我正在制作一个应该从某个DB中检索数据的程序，列出放在同一div中的按钮上的一些数据，并用按钮onclick形成新的div，直到达到某个最大值。为了使这个例子对其他人有用，我没有从DB中检索数据，而是使用了一些通用数字（值5分配给变量levmax，并且每个for循环都有一些赋值，但所有这些值应该从DB中检索。

我遇到的问题是如何将所有DIV放在一起。我在这里找到的所有例子都解释了如果它们是在代码的HTML部分中创建的，那么如何对齐它们。但我想用JS部分创建我的DIV。

代码工作正常，但所有DIV彼此相邻的部分除外。代码有80行，但我需要的是如何对齐DIV。这是代码：

<html>
<head>
<script>
var lev = 0; 
var levmax=5;
var count = 0;
function addBu(){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i<3; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            if(lev===1){
            bu.addEventListener("click", novo);
            }
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
};

function novo(){
    if(lev===1){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i<4; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.addEventListener("click", repeat);
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
    }
    function repeat(){
        if(lev<levmax){
            lev++;      
            var bo = document.getElementById("kod");
            var di = document.createElement('DIV');
            for (var i=0; i<2; i++){
                var bu= document.createElement('BUTTON');  
                var te = document.createTextNode('Text');
                var te1 = document.createTextNode(lev.toString());
                var br = document.createElement('BR');
                bu.addEventListener("click", repeat);
                bu.id=lev.toString();
                bu.appendChild(te);
                bu.appendChild(te1);
                di.appendChild(bu);
                di.appendChild(br);
                count++;
            }   
            bo.insertBefore(di, bo.childNodes[0]); 
            var le=(lev-1).toString();
            document.getElementById(le).removeEventListener("click", repeat);
        }
    }

}
</script>
</head> 
<body id="kod" onload="addBu()">
</body>
</html>enter code here

<head>
<script>
var lev = 0; 
var levmax=5;
var count = 0;
function addBu(){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i<3; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            if(lev===1){
            bu.addEventListener("click", novo);
            }
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
};

function novo(){
    if(lev===1){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        for (var i=0; i<4; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.addEventListener("click", repeat);
            bu.id=lev.toString();
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);
            count++;
        }

        bo.insertBefore(di, bo.childNodes[0]); 
    }
    function repeat(){
        if(lev<levmax){
            lev++;      
            var bo = document.getElementById("kod");
            var di = document.createElement('DIV');
            for (var i=0; i<2; i++){
                var bu= document.createElement('BUTTON');  
                var te = document.createTextNode('Text');
                var te1 = document.createTextNode(lev.toString());
                var br = document.createElement('BR');
                bu.addEventListener("click", repeat);
                bu.id=lev.toString();
                bu.appendChild(te);
                bu.appendChild(te1);
                di.appendChild(bu);
                di.appendChild(br);
                count++;
            }   
            bo.insertBefore(di, bo.childNodes[0]); 
            var le=(lev-1).toString();
            document.getElementById(le).removeEventListener("click", repeat);
        }
    }

}
</script>
</head> 
<body id="kod" onload="addBu()">
</body>
</html>

Answer 1

使用CSS！假设每个项目的HTML组件包含<div>都有一个类名.item：

.item {
  width: 300px;
  padding: 20px;
  float: left;
}

会将所有<div>与类名item并排排列。

事实上，有很多方法可以做到这一点。以下是使用BootStrap的示例：

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="db-item col-md-4">

            </div>
            <div class="db-item col-md-4">

            </div>
            <div class="db-item col-md-4">

            </div>
        </div>
    </div>
</body>

然后使用您的JavsScript技能随时插入新的</div><div class="row">。在这种情况下，每3个项目将是理想的。

Answer 2

您可以在此处使用flex-box。

/*The container div*/
.flex_container {
   display: flex; /* This will make the div as flexible container*/
   flex-flow: row wrap; // the shortcut for flex-direction: row/column; and flex-wrap:wrap;
   /* Other styles ...*/
}
/*for generated divs*/
.flex_item {
  /*your styles*/
}

您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/

了解有关flex-box的更多信息

多个DIV彼此相邻

2 个答案: