Div 元素未正确对齐

Question

I am building a sample program in javascript in which i want to dynamically create buttons and div elements. I want the div elements to be horizontally aligned , I managed to dynamically create buttons and div tags, but the problem is that div elements/tags are appearing in vertical order instead of horizontal order.

 // -------- TESTING CODE-------- var clicks = 0; var data = { "Sheet1": [{ "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "80", "NoOfDeliveries": "55", "FinalPrice": "4320" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "90", "NoOfDeliveries": "14", "FinalPrice": "1030" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "100", "NoOfDeliveries": "27", "FinalPrice": "2060" }, { "PlanName": "Mom's Love", "Price": "80", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "110", "NoOfDeliveries": "7", "FinalPrice": "450" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "120", "NoOfDeliveries": "55", "FinalPrice": "4005" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "130", "NoOfDeliveries": "55", "FinalPrice": "3995" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "140", "NoOfDeliveries": "55", "FinalPrice": "3985" }, { "PlanName": "Bloom Box", "Price": "75", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "150", "NoOfDeliveries": "55", "FinalPrice": "3975" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "160", "NoOfDeliveries": "55", "FinalPrice": "5120" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "170", "NoOfDeliveries": "55", "FinalPrice": "5110" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "180", "NoOfDeliveries": "55", "FinalPrice": "5100" }, { "PlanName": "Paradise", "Price": "96", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "190", "NoOfDeliveries": "55", "FinalPrice": "5090" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Weekly", "BillingType": "Monthly", "Savings": "200", "NoOfDeliveries": "55", "FinalPrice": "5575" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Monthly", "BillingType": "Monthly", "Savings": "210", "NoOfDeliveries": "55", "FinalPrice": "5565" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Bi-Weekly", "BillingType": "Monthly", "Savings": "220", "NoOfDeliveries": "55", "FinalPrice": "5555" }, { "PlanName": "Romance ", "Price": "105", "DeliveryType": "Custom", "BillingType": "Monthly", "Savings": "230", "NoOfDeliveries": "55", "FinalPrice": "5545" } ] } var newArr = []; var containerDiv, containerDivRows, containerDivCols; function init() { for (var i = 0; i < data.Sheet1.length; i++) { newArr.push(data.Sheet1[i].DeliveryType); newArr = newArr.filter(function(item, pos) { return newArr.indexOf(item) == pos; }); } for (var j = 0; j < newArr.length; j++) { console.log(newArr[j]); var btn = document.createElement("button"); btn.innerHTML = newArr[j]; btn.className = newArr[j] + " " + "btn btn-light"; btn.style.marginLeft = "10px"; document.body.appendChild(btn); } //----------TESTING CODE FOR CREATING EMPTY SPACE USING "BR" TAG----------- var mainBr = document.createElement("br"); document.body.appendChild(mainBr); // ---------TESTING CODE FOR CREATING CONTAINER DIV-------- containerDiv = document.createElement("div"); containerDiv.className = "container"; document.body.appendChild(containerDiv); // ---------TESTING CODE FOR CREATING CONTAINER DIV'S ROWS USING BOOTSTRAP-------- containerDivRows = document.createElement("div"); containerDivRows.className = "row"; document.body.appendChild(containerDiv).appendChild(containerDivRows); // ---------TESTING CODE FOR CREATING CONTAINER'S COL USING BOOTSTRAP-------- containerDivCols = document.createElement("col"); containerDivCols.className = "col-md-4"; document.body.appendChild(containerDiv).appendChild(containerDivRows).appendChild(containerDivCols); } init(); document.querySelector(".Weekly").addEventListener("click", () => { console.log("Button Clicked....."); clicks += 1; // ------ TESTING CODE ------- if (clicks < 2) { displayData(); } }) function displayData() { console.log("hello...."); // ------ TESTING CODE FOR CREATING DIV ELEMENT------- var newCount = 0; for (var k = 0; k < 3; k++) { newCount += k; var myDiv = document.createElement("div"); myDiv.style.marginTop = "30px"; myDiv.style.width = '200px'; myDiv.style.height = '200px'; myDiv.style.backgroundColor = 'grey'; myDiv.style.float = "left"; myDiv.style.position = "relative"; myDiv.style.display = "inline"; // document.body.appendChild(myDiv); document.body.appendChild(containerDiv).appendChild(containerDivRows).appendChild(containerDivCols).appendChild(myDiv); } }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ditstek Innovations Pvt Ltd</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="shortcut icon" href="#" /> </head> <body> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <script src="js/index.js"></script> </body> </html>

Answer 1

Try adding display: inline-block to the outermost div in your JS code which dynamically generates buttons and divs.

Answer 2

Just use a div tag with class="row" and the rest inside