html - 如何将文字设置为与图片相同的高度？

Question

想象一下现在的样子

我想在一张卡片上的文字与图片的高度相同。请问，我该怎么办？

我尝试了一些边距和填充的组合，但没有任何效果。

.column {
  float: left;
  margin: 5px;
  width: 30%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #444;
  color: white;
  width: 100%;
}

.card ul li img{
  height: 300px;
  width: 100%;
}

.picture{
  overflow: hidden;
  max-height: 400px;
  max-width: 200px;
  display: inline-block;
}

.text{
  display: inline-block;
}

.text h1{
  display: inline;
}

<div class="column">
<div class="card">
 <div class="picture">
   <img src="pictures/picture2.jpg" alt="pic1">
 </div>
 <div class="text">
   <h1>Lorem ipsum <br>dolor sitam</h1>
   <h3>Lorem ipsum dolor sit<br> amet, consectetur</h3>
   <p>0,99€ /ks </p>
   <button class="button">Zobraziť viac</button>
 </div>

我希望有顶行从顶部开始的文本，而不是在中间。

标签： htmlcss

Answer 1

向您的班级添加一个vertical-align:topCSS 规则。.text这会将 div 带到其容器的顶部并将其与图像对齐。

.column {
  float: left;
  margin: 5px;
  width: 30%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #444;
  color: white;
  width: 100%;
}

.card ul li img{
  height: 300px;
  width: 100%;
}

.picture{
  overflow: hidden;
  max-height: 400px;
  max-width: 200px;
  display: inline-block;
}

.text{
  display: inline-block;
  vertical-align:top;
}

.text h1{
  display: inline;
}

<div class="column">
  <div class="card">
    <div class="picture">
      <img src="https://via.placeholder.com/200x400" alt="pic1">
    </div>
    <div class="text">
      <h1>Lorem ipsum <br>dolor sitam</h1>
      <h3>Lorem ipsum dolor sit<br> amet, consectetur</h3>
      <p>0,99€ /ks </p>
      <button class="button">Zobraziť viac</button>
    </div>
  </div>
</div>