Question

我见过这段代码（http://jsfiddle.net/eMNfd/21/），但我想知道如何让新的div可以在蓝色的右边创建，也就是说，在水平模式下。

document.getElementById("text").onclick = function () {
    var ok = true;

     if (ok === true) {
          var div = document.createElement('div');
           
          div.className = 'new-rect';       
            //div.style.backgroundColor = "black";

       document.getElementsByTagName('body')[0].appendChild(div);
    }
};

.new-rect {
    background: black;
    width: 20%;
    height: 30px;
}

<div id="text" style="width:20%;height:30px;background-color:blue;"></div>

感谢所有人。

Answer 1

您可以使用float（必须在所有div上设置才能使用），您也可以使用inline-block：

＆＃13;

document.getElementById("text").onclick = function () {
    var ok = true;

     if (ok === true) {
          var div = document.createElement('div');
           
          div.className = 'new-rect';       
            //div.style.backgroundColor = "black";

       document.getElementsByTagName('body')[0].appendChild(div);
    }
};

＆＃13;

body {
  font-size: 0; /* to get rid of the space between the divs */
  white-space: nowrap; /* to prevent wrapping on multiple lines */
}

div {
  display: inline-block; /* to add divs horizontally */
}

.new-rect {
    background: black;
    width: 20%;
    height: 30px;
}

＆＃13;

<div id="text" style="width:20%;height:30px;background-color:blue;"></div>

＆＃13;

如何使用具有特定位置的GETELEMENT

1 个答案: