Question

当我点击一个按钮时，我的布局就崩溃了。当我点击一个按钮时，CSS会破坏我的布局。如何更新我的CSS以正确布局我的div？

＆＃13;

$(document).ready(function(e) {
  totalCount = 100;
  for (var i = 0; i < totalCount; i++) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "Number " + i;
    var applyClass = "bgColor"; //Identify the class
    document.getElementById("mainContainer").appendChild(newDiv);
    newDiv.id = "div" + i;
    document.getElementById(newDiv.id).className = applyClass;
    $('#div' + i).click(callbackFunction());
  }

  function callbackFunction(e) {
    return function() {
      //Remove all instances of css
      for (var i = 0; i < totalCount; i++) {
        $("#div" + i).removeClass('newColor');
      }
      document.getElementById(this.id).classList.add('newColor');
    }
  }
});

＆＃13;

div {
  background-color: #ff0;
  padding: 2px;
  font-size: 12px;
  float: left;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 30px;
  padding: 5px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}
.newColor {
  background-color: #00ffff;
  font-size: 16px;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 28px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="mainContainer">

</body>

＆＃13;

Answer 1

我想我知道你想要什么，试试这个：

    .newColor {
        background-color: #00ffff;
        font-size:16px;
        margin-left: 6px;
        margin-right: 6px;
        margin-top: 26px;
    }

Answer 2

使用display:inline-block代替......

   div {
        background-color: #ff0;
        padding:2px;
        font-size:12px;
        display:inline-block; // CHANGED THIS
        margin-left: 6px;
        margin-right: 6px;
        margin-top: 30px;
        padding: 5px;
        cursor:pointer;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }        
    .newColor {
        background-color: #00ffff;
        font-size:16px;
        margin-left: 6px;
        margin-right: 6px;
        margin-top: 27px;
        padding: 5px;
    }

Answer 3

您可以通过删除

来实现此目的

 float

让你的div像这样。

 div {
        background-color: #ff0;
        padding:2px;
        font-size:12px;
        word-wrap: break-word;//this one too. incase the word becomes too long.
        display: inline-block;//this one has been added.
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 30px;
        width:auto;
        padding: 5px;
        cursor:pointer;
        -webkit-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }

Answer 4

margin-top课程中的CSS .newColor只有1个像素。

尝试下面的修改代码

$(document).ready(function(e) {
  totalCount = 100;
  for (var i = 0; i < totalCount; i++) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "Number " + i;
    var applyClass = "bgColor"; //Identify the class
    document.getElementById("mainContainer").appendChild(newDiv);
    newDiv.id = "div" + i;
    document.getElementById(newDiv.id).className = applyClass;
    $('#div' + i).click(callbackFunction());
  }

  function callbackFunction(e) {
    return function() {
      //Remove all instances of css
      for (var i = 0; i < totalCount; i++) {
        $("#div" + i).removeClass('newColor');
      }
      document.getElementById(this.id).classList.add('newColor');
    }
  }
});

div {
  background-color: #ff0;
  padding: 2px;
  font-size: 12px;
  float: left;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 30px;
  padding: 5px;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}
.newColor {
  background-color: #00ffff;
  font-size: 16px;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="mainContainer">

</body>

如何使CSS更新一致？

4 个答案: