css - 如何对齐相同高度的div

Question

我有这个代码

.row {
  width: 600px;
}

.row div {
  display: inline-block;
  width: 50%;
  float: left;
}

.text {
  background-color: lightblue;
}

<div class="row">
  <div class="image">
    <img src="http://placehold.it/250x150">
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
  </div>
</div>

我希望我的 div .text 与图像具有相同的高度。 我想要它响应不，我不能将高度设置为 .text

感谢您的帮助!

Answer 1

一个选项是使用 Flexbox

body, html {
  margin: 0;
  padding: 0;
}

.row {
  width: 600px;
  display: flex;;
}

.text {
  background-color: lightblue; 
}

img {
  vertical-align: top;
}

<div class="row">
  <div class="image"><img src="http://placehold.it/250x150">
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
  </div>
</div>

另一个是CSS表格

body, html {
  margin: 0;
  padding: 0;
}

.row {
  width: 600px;
  display: table;
}

.text {
  background-color: lightblue; 
  display: table-cell;
  vertical-align: top;
}

.image {
  display: table-cell;
  vertical-align: top;
}

img {
  vertical-align: top;
}

<div class="row">
  <div class="image"><img src="http://placehold.it/250x150">
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis incidunt.</p>
  </div>
</div>