css - HTML5 CSS 等高列不适用于图像 [Table/Table Cell Method]

Question

我正在尝试弄清楚如何仅使用 HTML 和 CSS 使列高相等。我尝试使用的方法是将包含元素设置为显示表格，将列设置为显示表格单元格。

当列中只有文本时，它工作得很好。但是，如果我将图像添加到其中一列，它就会中断。看起来它在任一列的元素上方或下方添加了大量填充。

我该如何解决这个问题，让一列包含文本，第二列包含图像。元素与容器顶部对齐的列？我卡住了:-(

查看示例:

两列纯文本:https://jsfiddle.net/acekicker77/gowcsx0c/

带有图像的两列:https://jsfiddle.net/acekicker77/mqojn2kx/

HTML 2:

main {
  background-color: aquamarine;
  margin: 0 auto;
  width: 60%;
  padding: 1em;
}

#colWrap {
  display: table;
  width: 100%;
  background-color: beige;
}

.col {
  display: table-cell;
  width: 25%;
  background-color: brown;
  border: 1px solid white;
  padding: 0;
}

.imgWrap {
  width: 50%;
}

img {
  width: 100%;
  height: auto;
}

<main>
  <div id="colWrap">
    <div class="col">
      <p>This is a column of text</p>
    </div>
    <!-- close div class col -->

    <div class="col">
      <p>This is a column of text</p>
      <p>This column is longer than the other</p>
    </div>
    <!-- close div class col -->
  </div>
<!-- close id colWrap -->
</main>

Answer 1

使用 vertical-align:top 在 div 顶部对齐元素

main {
  background-color: aquamarine;
  margin: 0 auto;
  width: 60%;
  padding: 1em;
}

#colWrap {
  display: table;
  width: 100%;
  background-color: beige;
}

.col {
  display: table-cell;
  width: 25%;
  background-color: brown;
  border: 1px solid white;
  padding: 0;
  vertical-align:top; 
}

.imgWrap {
  width: 50%;
}

img {
  width: 100%;
  height: auto;
}

<main>
  <div id="colWrap">
    <div class="col">
      <p>This is a column of text</p>
    </div>
    <!-- close div class col -->

    <div class="col">
      <img src="https://imageshack.com/i/povCNXlyj"/>
      <p>This is a column of text</p>
      <p>This column is longer than the other</p>
    </div>
    <!-- close div class col -->

  </div>
  <!-- close id colWrap -->

</main>
<!--close main content -->