html - 尝试在不使用 CSS HTML 中的表格的情况下在每一列中制作 3 列不同的东西

Question

不确定是否可以这样做。这是我经过多次尝试后所处的位置。

我想将 HTML 页面布局为 3 列，每列中包含不同种类的内容。我已经尝试了很多东西并且已经用完了想法。难道这只能在表中完成？

或者是否有一种方法可以像下面的示例网格那样仅使用 CSS 更改 HTML 来排列列？

我想要的:

----------------------------------------------------
| Column left 1|   Column center   | Column right  |
---------------|                   |----------------
| Column left 2|                   |
---------------|                   |
| Column left 3|                   |
---------------|                   |
               |-------------------|

我得到的:

----------------------------------------------------
| Column left 1|   Column left 2   | Column left 3 |
---------------|-------------------|----------------
-------------------------------------
|   Column center   | Column right  |
|                   |----------------
|                   |
|                   |
|                   |
|                   |
|-------------------|

这是我最后一次尝试的代码...

    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 200px; /* Should be removed. Only for demonstration */
    }

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

    <h2>Three Columns</h2>

    <div class="row">
    <div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

如有任何帮助或建议，我们将不胜感激。提前致谢。

Answer 1

由于您只要求更改 CSS，因此我的建议是:使用 ****display:flex****。在我看来，这是最好的选择。想要了解更多，是我的favorite link

* {
  box-sizing: border-box;
}

.column {
  padding: 10px;
  margin: 5px;
}

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

.row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.row div {
  display: flex;
  flex-direction: column;
}

希望对您有所帮助。