时间戳

首页 > 解决方案 > 具有自动高度的子 div 彼此相邻

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

问题描述

我在父 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>

标签： htmlcss

解决方案

问题

  • .post-info_infoHTML 中不存在。

  • .post-link并且.post-info_content不存在于 CSS 中。

  • .post-infodisplay:table然而，它唯一的孩子是完全.post-link没有风格的。

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

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

解决方案

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

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

  • .link如此分配display:flex它的孩子，并肩.img而坐。.content

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

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

  • 添加了 Boba Fett，因为他 pwns。

演示

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

推荐阅读