问题

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，因为他是pwn。

演示

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

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

2 个答案:

问题

解决方案

演示