html - 无法水平显示div内的div？ (HTML, CSS)

Question

我不知道我做错了什么，我无法在一个 div 中获取 3 个 div 来水平显示一行。它们似乎像一列一样相互堆叠，我想要一行。

我想在“%”中使用宽度值，因为我希望它是动态的而不是固定的。

我觉得错误可能是我没有为页面定义全尺寸 100% 宽度，所以 33,33% 不能是相对的。

* {
  box-sizing: border-box;
}

div {
  * background-color: gray;
  border: 1px solid black;
}

div.header {
  padding: 20px;
  text-align: center;
}

div.column {
  float: left;
  width: 33, 33%;
  padding: 15px;
}

div.row:after {
  display: table;
  clear: both;
  content: "";
}

div.footer {
  text-align: center;
}

<div class="header">
  <h2>Rubrik</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
    quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
  </p>
</div>
<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
    quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
  </p>
</div>

提前致谢!

Answer 1

div.column {
    float: left;
    width: 33.33%;
    padding: 15px;
}

使用。而不是，