HTML5 CSS等高度列不使用图像[表/表格单元格方法]

Question

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

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

如何修复此问题，以便我有一个包含文本的列，第二列包含图像。元素与其容器顶部对齐的列？ IM STUCK： - （

参见示例：

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

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

HTML 2：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以在.col类中使用vertical-align：middle;

Answer 2

将vertical-align:top用于div

之上的align元素

＆＃13;

＆＃13;

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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

fiddle在表格单元格中添加一个垂直对齐中间位置以确保图像对齐

vertical-align: middle;