Question

我正在用javascript构建一个示例程序，我想在其中动态创建按钮和div元素。 我希望div元素水平对齐，我设法动态创建了按钮和div标签，但是问题是div元素/标签以垂直顺序而不是水平顺序出现。

// -------- 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

请尝试在您的JS代码的最外面的div中添加display: inline-block，以动态生成按钮和div。

Answer 2

只需使用class =“ row”的div标签，其余标签都在其中

Div元素未正确对齐

2 个答案: