Javascript 在网页的左侧和右侧显示文本_Javascript_Html_Css

Javascript 在网页的左侧和右侧显示文本

javascript html css

Javascript 在网页的左侧和右侧显示文本,javascript,html,css,Javascript,Html,Css,我试图将网页分成两列并显示文本。我的html是： <!DOCTYPE html> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> <script> function showAlert() { var myString = "I s

我试图将网页分成两列并显示文本。我的html是：

<!DOCTYPE html>
<html>
<head>
    <title>My first styled page</title>
    <link rel="stylesheet" href="mystyle.css">

    <script>

    function showAlert() {
     var myString = "I should be printed on left side";
              alert("onclick Event detected! " + this.innerHTML);
    document.getElementById("two").innerHTML = myString;
        }


    window.onload = function mydisplayArray() {
          var array = ['abc','xyz','mno']; 

    for (i=0;i<array.length;i++) {
            var span = document.createElement('span');
            span.innerHTML = array[i];
            span.onclick = showAlert; 
            var div = document.createElement('div');
            //var div = document.getElementById('one'); // This interchanges the columns and displayes array elements in single line without any space, so this doesn't works
            div.appendChild(span);
            document.body.appendChild(div);
            }
    }

    </script>
   </head>

  <body>
      <div id="container">
      <div id="header">
        <h1>Main Title of Web Page</h1>
         Here I am trying to split the webpage into two columns and display text.
      </div>
     <div id="one">
     </div>
     <div id="two">
          <b>This is test one<br>
          <b>This is test two<br>
          </b>
     </div>

    </div>
  </body>

</html>

现在，我的问题是我无法在页面右侧显示数组元素，这意味着我希望在

div

one

中显示它。如果我尝试这样做（请参阅我的html文件

var div

），那么这些列将互换，数组元素将显示在一行中，它们之间没有任何空格。所以，显然这不是正确的方法。如何显示

div

one

中的数组元素

当前，我的数组元素显示在

div

one

的下方，表示在

黄色的下方。我希望它以黄色
颜色显示。
好的，非常简单的错误，请参阅
编辑你的js
//document.body.appendChild（div）；您应该将其注释掉
将此添加到css
#one>span{display:block；}
您将div附加到整个主体上，这就是它脱离container div的原因
  #container {
     width:100%;
     height:200px;
     }

  #header {
    margin-bottom:0;
    background-color:red;
   }

 #one {
    width:40%;
    height:200px;
    float:left;
    background-color:yellow;
   }

#two {
   width:60%;
   height:200px;
   float:left;
   background-color:cyan;
   }