Question

我正在尝试将网页划分为两列并显示文本。我的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>

我的css文件是：

  #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;
   }

现在，我的问题是我无法在页面右侧显示数组元素，这意味着我想在div id one中显示它。如果我尝试这样做（参见我的html文件var div），那么列就会互换，数组元素会以单行显示，而不会显示它们之间的任何空格。所以，显然这不是正确的方法。如何在div id one？

中显示数组元素

目前，我的数组元素显示在div ID one下方，意味着低于yellow颜色。我希望它以yellow颜色显示。

Answer 1

好的，非常简单的错误，请参阅DEMO HERE

编辑你的js //document.body.appendChild(div); YOU SHOULD COMMENT THIS OUT
将此添加到css #one > span {display:block;}

你正在将div添加到整个身体，这就是为什么它突破了容器div。

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

1 个答案: