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

Question

我在一个大容器div里面有两个div。图像和文本div使用以下HTML＆amp;放置并排放置。 CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，我想要实现的是文本div将在左侧，而图像div在jumbotron div中向右。这成功了，但不幸的是，图像与文本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，但不会＃ 39; t默认使用所有可用的水平空间。

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

希望有所帮助。