html - 显示宽度为 : table. 的等高列

Question

试图找出列宽不同的原因，以及如何使它们等宽。

.col-container {
  display: table;
  width: 100%;
  margin: 0 auto;
}

.col {
  display: table-cell;
}

<div class="col-container">
  <div class="col col1">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col col2">
    <h2>Column 2</h2>
    <p>Hello World!</p>
  </div>

  <div class="col col3">
    <h2>Column 3</h2>
    <p>Some other text..</p>
  </div>
</div>

Answer 1

您可以使用 table-layout:fixed; 属性，它应该均匀地喷洒列(问题关键字: 等于宽度)。

您还可以添加一个 width 来保护它。 border-spacing 如果您也使用它，则应包含在 width 计算中。

https://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

17.5.2.1 Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

.col-container {
  display: table;
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
}

.col {
  display: table-cell;
  border: solid;
}

.w {
  margin-top: 1em;
  border-spacing: 2px;
}
/* add width and border-spacing */
.w.col {
  width: 33.33%;
  box-sizing: border-box;
}

<div class="col-container">
  <div class="col col1">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col col2">
    <h2>Column 2</h2>
    <p>Hello World!</p>
  </div>

  <div class="col col3">
    <h2>Column 3</h2>
    <p>Some other text.. Some other text.. Some other text.. Some other text..</p>
  </div>
</div>

<div class="col-container w">
  <div class="col col1">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col col2">
    <h2>Column 2</h2>
    <p>Hello World!</p>
  </div>

  <div class="col col3">
    <h2>Column 3</h2>
    <p>Some other text.. Some other text.. Some other text.. v Some other text..</p>
  </div>
</div>