多个DIV彼此相邻

Question

I am making a program that should retrieve data from some DB, list some data on button placed in the same div, and form new div with buttons onclick , until it reaches some maximum value. 我正在制作一个程序，该程序应该从某个数据库中检索数据，在放在同一div中的按钮上列出一些数据，并使用onclick按钮形成新的div，直到达到某个最大值。 To make this example useful for other people, I didn't retrieve data from DB, instead I used some general numbers (value 5 is assigned to variable levmax , and every for loop has some assigned value, but all these values should be retrieved from DB). 为了使该示例对其他人有用，我没有从DB检索数据，而是使用了一些通用数字（将值5分配给变量levmax ，并且每个for循环都有一些分配的值，但是所有这些值都应从D B）。

The problem i have is how to put all the DIVs next to each other. 我的问题是如何使所有DIV彼此相邻。 All examples I found here explain how to align them if they are created in HTML part of the code. 我在这里找到的所有示例都说明了如果它们是在代码的HTML部分中创建的，则如何对齐它们。 But I want to created my DIVs in JS part. 但是我想在JS部分中创建DIV。

The code works fine, except the part where all the DIVs stand next to each other. 该代码工作正常，除了所有DIV彼此相邻的部分。 Code has something like 80 lines, but all I need is how to align DIVs. 代码有80行，但是我需要的是如何对齐DIV。 Here is the code: 这是代码：

<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

Using CSS! 使用CSS！ Let's say the containing <div> for each item's HTML component has a class name .item : 假设每个项目的HTML组件的包含<div>都有一个类名.item ：

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

would align all <div> 's with class name item side-by-side. 会将所有<div>与类名称item并排对齐。

In fact there are many ways to do this. 实际上，有很多方法可以做到这一点。 Here's an example using BootStrap: 这是使用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>

and then use your JavsScript skills to insert a new </div><div class="row"> whenever you want one. 然后使用您的JavsScript技能在需要的时候插入新的</div><div class="row"> 。 In this case, every 3 items would be the ideal. 在这种情况下，每3个项目将是理想的选择。

Answer 2

You can use flex-box here. 您可以在此处使用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*/
}

You can learn more about flex-box at https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/上了解有关flex-box的更多信息。

多个DIV彼此相邻

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-22 16:15:12

解决方案2
1 2016-07-22 17:08:50

多个DIV彼此相邻

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-22 16:15:12

解决方案2 1 2016-07-22 17:08:50

解决方案1
2 已采纳 2016-07-22 16:15:12

解决方案2
1 2016-07-22 17:08:50