具有自动高度的子 div 彼此相邻

Question

我在父 div 中有两个相邻的子 div。我不知道任何一个 div 的高度必须是多少，因为它是由 viewport-height 生成的。

我的问题是，在左侧 div 中我有一个图像，但我不知道如何使该图像与需要具有高度的右侧 div 大小相同：auto。必须将父 div 调整为第二个子 div。

HTML

<div class="post-info">
    <a href="" class="post-link">
        <div class="post-info_img"></div>
        <div class="post-info_content">
            <p class="categorie_info">Category</p>
            <p class="titel">Header</p>
            <p class="info">
                Lorem ipsum dolor sit amet...
            </p>
            <p class="date">June 2018</p>
        </div>
    </a>
</div>

CSS

.post-info {
   width: 90vw;
   border-radius: 15px;
   background-color: #F6F6F6;
   box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
   margin-bottom: 2.5vh;
   display: table;
}

.post-info_img {
    background-image: url('http://via.placeholder.com/350x150');
    width: 30vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 15px 0 0 15px;
    display: table-cell;
}

.post-info_info {
    padding: 5% 4vw;
    display: table-cell;
}

.categorie_info {
    color: #5B7AEB;
}

.titel {
    font-size: 14px;
    color: #2B2B2B;
    margin: 0;
}

.info {
    font-size: 14px;
    margin-top: 5px;
}

.date {
    font-size: 12px;
    color: #707070;
}

.post-info {
  width: 90vw;
  border-radius: 15px;
  background-color: #F6F6F6;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 2.5vh;
  display: table;
}

.post-info_img {
  background-image: url('http://via.placeholder.com/350x150');
  width: 30vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 15px 0 0 15px;
  display: table-cell;
}

.post-info_info {
  padding: 5% 4vw;
  display: table-cell;
}

.categorie_info {
  color: #5B7AEB;
}

.titel {
  font-size: 14px;
  color: #2B2B2B;
  margin: 0;
}

.info {
  font-size: 14px;
  margin-top: 5px;
}

.date {
  font-size: 12px;
  color: #707070;
}

<div class="post-info">
  <a href="" class="post-link">
    <div class="post-info_img"></div>
    <div class="post-info_content">
      <p class="categorie_info">Category</p>
      <p class="titel">Header</p>
      <p class="info">
        Lorem ipsum dolor sit amet...
      </p>
      <p class="date">June 2018</p>
    </div>
  </a>
</div>

Answer 1

看起来您在 CSS 中拼错了类名。

找到.post-info_info并将其替换为.post-info_content：

.post-info {
  width: 90vw;
  border-radius: 15px;
  background-color: #F6F6F6;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 2.5vh;
  display: table;
}

.post-info_img {
  background-image: url('http://via.placeholder.com/350x150');
  width: 30vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 15px 0 0 15px;
  display: table-cell;
}

.post-info_content {
  padding: 5% 4vw;
  display: table-cell;
}

.categorie_info {
  color: #5B7AEB;
}

.titel {
  font-size: 14px;
  color: #2B2B2B;
  margin: 0;
}

.info {
  font-size: 14px;
  margin-top: 5px;
}

.date {
  font-size: 12px;
  color: #707070;
}

<div class="post-info">
  <a href="" class="post-link">
    <div class="post-info_img"></div>
    <div class="post-info_content">
      <p class="categorie_info">Category</p>
      <p class="titel">Header</p>
      <p class="info">
        Lorem ipsum dolor sit amet...
      </p>
      <p class="date">June 2018</p>
    </div>
  </a>
</div>

Answer 2

问题

• .post-info_info 在 HTML 中不存在。

• .post-link 和 .post-info_content 在 CSS 中不存在。

• .post-info 是 display:table，但它唯一的孩子是 .post-link，根本没有样式。

• 具有display:table-cell 的 2 个 div 是 .post-info_img（不是具有 display:table 的元素的子元素）和 .post-info_info（在 HTML 中不存在）。

这几乎可以保证您的布局甚至不会接近预期结果。

---

解决方案

• 使所有类都非常简单和语义化。

• 将所有 div 标签更改为语义等价物。

• 将.link 分配为display:flex，因此其子.img 和.content 并排放置。

• 将背景图片更改为img标签，然后分配display:block和object-fit:cover

• 用固有维度替换百分比维度（例如 width:20% 到 width:20vw）

• 添加了 Boba Fett，因为他拥有。

---

演示

.info {
  width: 90vw;
  border-radius: 15px;
  background-color: #F6F6F6;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
  margin-bottom: 2.5vh;
  display: table;
  font-size: 14px;
  margin-top: 5px;
}

.link {
  display: flex;
  justify-content: center;
}

.img {
  position: relative;
  width: 35vw;
  min-height: 40vh;
  display: table-cell;
  padding: 0;
  overflow:hidden
}

.img img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: .5em;
  left: .5em;
  width: 35vw;
  min-height: 35vh;
  object-fit: cover;
  border-radius: 15px 0 0 15px;
  overflow:hidden;
}

.content {
  width: 50vw;
  min-height: 40vh;
}

.category {
  color: #5B7AEB;
  font-variant: small-caps;
  font-size: 1.25em
}

.title {
  color: #2B2B2B;
  margin: 0;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 1.83em
}

.date {
  color: #707070;
}

<section class="info">
  <a href="" class="link">
    <figure class="img">
      <img src='https://www.sideshowtoy.com/wp-content/uploads/2018/01/star-wars-boba-fett-deluxe-version-sixth-scale-figure-hot-toys-feature-903352-900x600.jpg'>
    </figure>
    <article class="content">
      <header class="category">Profile
        <h1 class="title">Boba Fett</h1>
      </header>
      <p class="text">
        "I am the best bounty hunter in the galaxy. I will find your rebel scum or the next carbonite bath is on me," Specializes in Jedi location...
      </p>
      <footer class="date"><small>June 2018</small></footer>
    </article>
  </a>
</section>