CSS在HTML元素上不起作用

Question

我有一小段用JavaScript和CSS编写的代码。

问题是“ div列”不受CSS代码影响。边框和背景应该出现，并且颜色应该是红色。

我想念什么？

代码如下：

https://codepen.io/orc2000/pen/VdEXVY

var text = "";
text += '<div class="row">';

text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 1' + '</h4>';
text += '<img src="SomePicture 1"' + 'width="100" height="100" align = "center" > ';
text += '<p>' + 'Price 20' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';

text += '<div class="wrapper-elem"';
text += '<div class="column">';
text += '<h4> Column 2' + '</h4>';
text += '<img src = "SomePicture 2"' + 'width="100" height="100" align = "center" > ';
text += '<p>' + 'Pret 10' + '</p>';
text += '<p>' + 'DryFood' + '</p>';
text += '</div>';
text += '</div>';

text += '</div>';

document.getElementById("delta").innerHTML = text;

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.wrapper-elem {
  float: left;
  width: 50 %;
  background-color: white;
  padding: 10px;
  border: 2px solid blue;
}

.column {
  border: 5px solid red;
  background-color: red;
}


/* Clear floats after the columns  */
.row: after {
  content: "";
  display: table;
  clear: both;
}

<div id="delta"></div>

Answer 1

您有：

当您使用JavaScript构建HTML时，
• 缺少一些HTML标记部分（2个COUNTIF结束）
• CSS中的空格（>）

width: 50_%

var text = `
  <div class="row">
    <div class="wrapper-elem">
      <div class="column">
        <h4>Column 1</h4>
        <img src="SomePicture 1" width="100" height="100" align="center">
        <p>Price 20</p>
        <p>DryFood</p>
      </div>
    </div>      
    <div class="wrapper-elem">
    <div class="column">
      <h4>Column2</h4>
      <img src="SomePicture 2"width="100" height="100" align="center">
      <p>Pret 10</p>
      <p>DryFood</p>
    </div>
  </div>
`;

document.getElementById("delta").innerHTML = text;

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.wrapper-elem {
  float: left;
  width: 50%;
  background-color: white;
  padding: 10px;
  border: 2px solid blue;
}

.column {
  border: 5px solid red;
  background-color: red;
}

/* Clear floats after the columns  */
.row: after {
  content: "";
  display: table;
  clear: both;
}

Answer 2

最好在DOM准备好后调用您的js ：） 小型重构

"use strict"

  function generateText() {
    var text = "";
    text += '<div class="row">';

    text += '<div class="wrapper-elem"';
    text += '<div class="column">';
    text += '<h4> Column 1' + '</h4>';
    text += '<img src="SomePicture 1"' + 'width="100" height="100" align="center">';
    text += '<p>' + 'Price 20' + '</p>';
    text += '<p>' + 'DryFood' + '</p>';
    text += '</div>';
    text += '</div>';

    text += '<div class="wrapper-elem"';
    text += '<div class="column">';
    text += '<h4> Column 2' + '</h4>';
    text += '<img src = "SomePicture 2"' + 'width="100" height="100" align="center">';
    text += '<p>' + 'Pret 10' + '</p>';
    text += '<p>' + 'DryFood' + '</p>';
    text += '</div>';
    text += '</div>';

    text += '</div>';

    return text;
  }

  document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("delta").innerHTML = generateText();
  });