Javascript 相邻的多个div_Javascript_Html_Css

Javascript 相邻的多个div

javascript html css

Javascript 相邻的多个div,javascript,html,css,Javascript,Html,Css,我正在制作一个程序，从一些数据库中检索数据，在同一个div中的按钮上列出一些数据，并使用按钮onclick形成新的div，直到它达到某个最大值。为了使这个示例对其他人有用，我没有从DB中检索数据，而是使用了一些常规数字（值5被分配给变量levmax，每个for循环都有一些分配值，但所有这些值都应该从DB中检索）我的问题是如何把所有的div放在一起。我在这里找到的所有示例都解释了如果它们是在代码的HTML部分创建的，如何对齐它们。但我想在JS部分创建我的div 代码运行良好，除了所有div彼此相

我正在制作一个程序，从一些数据库中检索数据，在同一个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>


var-lev=0；
var-levmax=5；
var计数=0；
函数addBu（）{
lev++；
var bo=document.getElementById（“kod”）；
var di=document.createElement（'DIV'）；
对于（var i=0；i使用CSS！假设包含每个项目的HTML组件的
有一个类名。项目：
.item {
  width: 300px;
  padding: 20px;
  float: left;
}

将所有
与类名项并排对齐
事实上，有很多方法可以做到这一点。下面是一个使用引导的示例：
<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技能在需要时插入一个新的
。在这种情况下，每3个项目都是理想的。
使用CSS！假设每个项目的HTML组件包含一个类名。项目：
.item {
  width: 300px;
  padding: 20px;
  float: left;
}

将所有
与类名项并排对齐
事实上，有很多方法可以做到这一点。下面是一个使用引导的示例：
<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技能在需要时插入一个新的
。在这种情况下，每3项都是理想的选择。
您可以在此处使用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*/
}

您可以在
了解有关flex box的更多信息。您可以在此处使用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*/
}

有关flex box的更多信息，请访问