如何让所有div的高度都相等？

Question

我从昨晚开始就一直在修复我的代码，我无法在某些 class 名称中添加更多高度：100%，因为它只会让输出变得更糟。

这是我的代码笔 -> https://codepen.io/sasddd/pen/QWKPPwg 只需在详细视图中查看它，以便您可以看到空间的差异。

这是我在 PUG 中的代码

.content
  section.event
    .container__content
      .event__title-container
        .title
          .title__lines
            h1.title__text EVENT
      .content__item-container.content__item-container--event
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える さまざまな業種や形態の体験施策に携わってきた経験値を武器に難な状...況を乗り越える
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
        a.content__item(href="#")
          img.content__image.content__image--event(
            src="https://i.picsum.photos/id/1022/6000/3376.jpg?hmac=FBA9Qbec8NfDlxj8xLhV9k3DQEKEc-3zxkQM-hmfcy0"
          )
          .content__wrapper.content__wrapper--event
            .content__date.content__date--event
              p.content__date-text 22 Jun, 2020
            .content__category-wrapper.content__category-wrapper--event
              p.content__title 宮津満腹祭 うまいもん集まれ 2020年12月24日開催
              .event__title-line
                .event__description-container
                  p.content__title--event 開催日：2020年12月24日
                  p.content__title--event 開催場所：東京都 渋谷区
                  p.content__title--event カテゴリ：フリーマーケット
                  p.content__title--event カテゴリ：フリーマーケット

这是我在 SCSS 中的代码

// EVENT SCSS
.event {
  position: relative;

  &__title-container {
    margin-top: 61px;
  }

  &__title-line {
    border-top: 1px solid black;
    margin-left: 6px;
    padding-left: 20px;
    height: 100%;
  }

  &__description-container {
    display: inline-block;
    border-left: 1px solid black;
    height: 100%;
  }
}

// CONTENT.SCSS
.content {
  position: relative;

  &__image {
    width: 380px;
    height: 210px;
    object-fit: cover;
    object-position: center;
    border: 5px solid white;

    &--small {
      border: 4px solid white;
      width: 278px;
      height: 156px;
    }

    &--category {
      border: 4px solid white;
      margin-top: 22px;
    }

    &--event {
      border: 4px solid white;
      height: 200px;
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 378px;
    color: black;
    margin: 0;

    &--small {
      width: 278px;
      margin-bottom: 31px;
    }

    &:not(:nth-child(3n + 3)) {
      margin-right: 35px;
    }

    &--category {
      // blank
    }
  }

  &__item-container {
    width: 1220px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 27px;
    height: 100%;

    &--small {
      width: 907px;
    }

    &--category {
      width: 100%;
    }

    &--event {
      width: 100%;
    }
  }

  &__date {
    position: absolute;
    margin-top: 5px;
    left: -5px;
    top: 38px;
    height: 28px;
    white-space: nowrap;
    transform: rotate(-90deg);

    &--small {
      left: -10px;
    }

    &--category {
      left: -25px;
    }

    &--event {
      top: 170px;
      left: 25px;
    }
  }

  &__date-text {
    font-size: 12px;

    &--category {
      font-size: 12px;
    }
  }

  &__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 8px;
    padding-left: 50px;

    &--category {
      padding-left: 12px;
    }

    &--event {
      justify-content: center;
      align-items: center;
      width: 100%;
      // height: 100%;
    }
  }

  &__category-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &--small {
      //blank
    }

    &--sp {
      //blank
    }

    &--event {
      display: block;
      width: 100%;
      // height: 100%;
    }
  }

  &__category-line {
    border-left: 1px solid black;
    margin-left: 6px;
    margin-top: 15px;
    padding-bottom: 5px;
    padding-right: 8px;

    &--small {
      margin-left: -5px;
    }
  }

  &__category-text {
    font-size: 16px;
    letter-spacing: 0.1em;
    padding-left: 19px;
    width: 338px;
    max-width: 100%;

    &--small {
      width: 234px;
      padding-left: 14px;
    }

    &--sidepanel {
      width: 100%;
      padding-left: 0;
      line-height: 2.25em;
    }

    &::before {
      content: " A0";
      padding-right: 14px;
      cursor: pointer;
    }

    &--skyblue {
      color: blue;
    }

    &--islamicgreen {
      color: green;
    }

    &--tawny {
      color: yellow;
    }

    &--purple {
      color: purple;
    }

    &--amaranth {
      color: red;
    }
  }

  &__title-line {
    border-top: 1px solid black;
    border-left: 1px solid black;
    margin-left: 6px;
    padding-right: 8px;
    padding-bottom: 21px;
    height: 100%;

    &--small {
      margin-left: -13px;
      padding-bottom: 5px;
      padding-right: 0;
    }

    &--category {
      padding-bottom: 2px;
    }

    // &--event {
    //   border-left: 1px solid $border;
    //   margin-left: 6px;
    //   padding-right: 8px;
    //   height: 100%;
    // }
  }

  &__title {
    padding-top: 21px;
    padding-left: 22px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5em;
    width: 338px;
    max-width: 100%;
    height: 100%;

    &--small {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 18px;
      line-height: 1.44em;
      width: 234px;
    }

    &--sidepanel {
      font-size: 18px;
      line-height: 1.5em;
      padding-top: 0;
      padding-left: 0;
      width: 100%;
    }

    &--event {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 16px;
      width: 234px;
    }
  }
}

Answer 1

这里有一些你可以尝试的东西：

参考this answer，编辑class content__title使其固定行。
从 class 中删除 justify-content: center; align-items: center; content__wrapper--event 以使内容不在中心。

Answer 2

我只是玩我的代码，我创建了一个新容器并添加了高度：100%；。就是这样！

如何让所有div的高度都相等？

How to make the height of all div are equal?

html

css

sass

web

pug