CSS：将两个并排的div放在相同的高度上

Question

我在一个大容器 div 中有两个 div。 Image 和 Text div 使用以下 HTML 和 CSS 并排放置：

       /*Jumbotron**/
       /***********/
       /**********/
       .jumbotron {
         width: 100%;
         overflow: hidden;
         background-color: white;
         padding: 30px;
       }
       .tekst {
         width: 20%;
         float: left;
         margin-right: 200px;
       }
       .image {
         width: 80%;
       }
       .image img {
         float: right;
         width: 200px;
         height: 225px;
         padding: 30px;
       }

<div class="jumbotron">
  <div class="text">
    <h1>Welkom!</h1>
    <p>Welkom! Mijn naam is Robert Kraaijeveld en dit is mijn portfolio!
      <br />Mijn CV, persoonlijke competenties en dossier kunt u via de knoppen onder deze tekst bereiken.</p>
  </div>

  <div class="image">
    <img src="img/pasfoto.jpg" alt="pasfoto">
  </div>
</div>

现在，我想要实现的是文本 div 位于左侧，而图像 div 位于 jumbotron div 内的右侧。这成功了，但不幸的是图像与文本 div 的高度不同。

有谁知道如何让图像 div 与文本 div 处于相同高度，同时仍位于其右侧？

Answer 1

以下是解决此问题的方法：

Fiddle for side-by-sides at the same height

CSS

.jumbotron {
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding: 30px;
    font-size: 0;
}
.jumbotron > div {
    display:inline-block;
    vertical-align: top;
    font-size: 1rem;
}
.text {
    width: 20%;
}

说明

所以我们摆脱了你所有的花车。您可能可以通过浮动两个元素来解决此问题，但如果您有多个不同高度的元素，则可能会引入一些进一步的问题。

然后，我们将float 替换为display:inline-block;，因为这会将每个div 视为可以像div 一样调整大小的布局元素，但不会默认消耗所有可用的水平空间.

最后，我们在.jumbotron 元素上设置了font-size: 0，这样您的内联块就不会被标签开头和结尾之间的空格分开。然后我们使用font-size: 1rem将字体大小重置为默认字体大小。

希望对您有所帮助。