如何对齐相同的高度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>

Answer 2

以下是使用display-table的一种方式：

＆＃13;

＆＃13;

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

.row > div {
  width: 50%;
  display: table-cell;
  vertical-align: top; /* or 'middle' or 'bottom' etc. */
}

.text {
  background-color: lightblue;
}

.image img {
  display: block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一个只使用height:auto;的解决方案：

.row {
width: 600px;
height: auto;
background-color: lightblue;
}

.image, .text {
display: inline-block;
width: 49%;
}

.image {
background-color: white;
}

.text, .image 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>