微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

如何使线条高度相等？ 修复现有结构替代新结构

分类：编程问答

如何解决如何使线条高度相等？ 修复现有结构替代新结构

我注意到线条的高度相等，我尝试在某些特定容器中添加 height: 100% 但什么也没发生。任何想法将不胜感激。~

第一张图片是预期的输出，下面有相同的线条。

[![应该是这样][1]][1]

[![这是我的输出][2]][2]

这是我的输出。下面的线不相等。我用点标记了它。

这是我在 scss 中的代码

.content {
  position: relative;
  @include max-width;

  &__image {
    width: 100%;
    height: 202px;
    object-fit: cover;
    object-position: center;
    border: 5px solid white;
    @include sp {
      width: 85.38%;
      height: auto;
    }

    &--small {
      border: 4px solid white;
      height: 147px;
      @include sp {
        top: -10px;
        width: 33.29%;
        height: auto;
      }
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 378px;
    color: black;
    margin: 0;
    @include sp {
      width: 100%;
      height: auto;
    }

    &--small {
      width: 278px;
      @include sp {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
      }
    }

    &:not(:last-child) {
      margin-bottom: 31px;
      @include sp {
        margin-bottom: getsp375(40px);
      }
    }

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

  &__item-container {
    width: 1220px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 27px;
    height: 100%;
    @include sp {
      width: 100%;
      margin-top: getsp375(42px);
      height: auto;
      justify-content: center;
    }

    &--small {
      width: 907px;
      @include sp {
        width: 100%;
      }
    }
  }

  &__date {
    position: absolute;
    margin-top: 5px;
    left: -5px;
    top: 38px;
    height: 28px;
    white-space: Nowrap;
    transform: rotate(-90deg);
    @include sp {
      margin-top: 0;
      left: getsp375(-45px);
      top: getsp375(90px);
    }

    &--small {
      left: -10px;
      @include sp {
        left: 0;
        top: getsp375(27px);
      }
    }
  }

  &__date-text {
    font-size: 12px;
    @include sp {
      font-size: getsp375(18px);
    }
  }

  &__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 8px;
    padding-left: 50px;
    @include sp {
      display: block;
      padding-top: 0;
      padding-left: getsp375(20px);
      width: 92%;
      height: auto;
    }
  }

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

    &--small {
      @include sp {
        margin-left: getsp375(15px);
        margin-right: getsp375(30px);
      }
    }
  }

  &__category-line {
    border-left: 1px solid $border;
    margin-left: 6px;
    margin-top: 15px;
    padding-bottom: 5px;
    padding-right: 8px;
    @include sp {
      margin-left: getsp375(18px);
      margin-top: getsp375(32px);
      padding-bottom: getsp375(19px);
      padding-right: 0;
      width: 100%;
      max-width: 100%;
    }

    &--small {
      margin-left: -5px;
      @include sp {
        margin-left: getsp375(50px);
        margin-top: getsp375(1px);
        padding-bottom: getsp375(40px);
      }
    }
  }

  &__category-text {
    font-size: 16px;
    letter-spacing: 0.1em;
    padding-left: 19px;
    width: 338px;
    max-width: 100%;
    @include sp {
      font-size: getsp375(26px);
      padding-left: getsp375(15px);
      width: 100%;
      max-width: 100%;
    }

    &--small {
      width: 234px;
      padding-left: 14px;
      @include sp {
        position: absolute;
        width: 100%;
        top: -4px;
      }
    }

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

    &::before {
      content: ' \25A0';
      padding-right: getsp375(14px);
      cursor: pointer;
      @include sp {
        padding-right: getsp375(10px);
      }
    }

    &--skyblue {
      color: $skyblue;
    }

    &--islamicgreen {
      color: $islamicgreen;
    }

    &--tawny {
      color: $tawny;
    }

    &--purple {
      color: $purple;
    }

    &--amaranth {
      color: $amaranth;
    }
  }

  &__title-line {
    border-top: 1px solid $border;
    border-left: 1px solid $border;
    margin-left: 6px;
    padding-right: 8px;
    padding-bottom: 21px;
    @include sp {
      margin-left: getsp375(18px);
      padding-right: getsp375(8px);
      padding-bottom: getsp375(21px);
      width: 100%;
      max-width: 100%;
    }

    &--small {
      margin-left: -13px;
      padding-bottom: 5px;
      padding-right: 0;
      @include sp {
        margin-left: getsp375(50px);
        padding-bottom: getsp375(20px);
      }
    }
  }

  &__title {
    padding-top: 21px;
    padding-left: 22px;
    font-size: 24px;
    font-family: $mincho;
    font-weight: $medium;
    line-height: 1.5em;
    width: 338px;
    max-width: 100%;
    @include sp {
      padding-left: getsp375(21px);
      padding-top: getsp375(17px);
      font-size: getsp375(36px);
      width: 100%;
    }

    &--small {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 18px;
      line-height: 1.44em;
      width: 234px;
      @include sp {
        padding-top: getsp375(19px);
        padding-left: getsp375(21px);
        font-size: getsp375(32px);
        line-height: 1.5em;
        padding-right: 0;
        width: 100%;
      }
    }

    &--sidepanel {
      font-size: 18px;
      line-height: 1.5em;
      padding-top: 0;
      padding-left: 0;
      width: 100%;
      @include sp {
        font-size: getsp375(27px);
      }
    }
  }
}

这是我在哈巴狗中的代码

div.content
      //- SECTION - PICKUP
      section.pickup
        div.container__content
          div.title
            div.title__lines
              h1.title__text PICKUP
          div.content__item-container
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img1.jpg",alt="pickup1")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun,2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--skyblue 講習会
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img2.jpg",alt="pickup2")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun,2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--islamicgreen イベント
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img3.jpg",alt="pickup3")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun,2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--tawny お知らせ
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証リアル...を

解决方法

调试代码太难了，所以我创建了一个新的“卡片”结构。

编辑：通过将 height: 100%; 添加到 &__title-line 和 &__wrapper 选择器，同时调整“列”的宽度和边距以使用 { {1}} 个值而不是固定值。

修复现有结构

查看 codepen 和 difference between the css。

替代新结构

%

然后是下面的“卡片”scss

.card
  img(src="https://via.placeholder.com/300x150")
  .card__body
    .card__left
      | 22 Jun,2020
    .card__right
      .card__category.card__category--green
        | ■ イベント
      .card__content
        | リアルをコアとした体験をデザインし、情報拡散や態度

运行下面的示例进行检查。

.card {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 padding: 10px;
 width: 33.3%;

  img {
    border: 5px solid #fff;
    margin-bottom: 15px;
    max-width: 100%;
  }

  &__body {
    display: flex;
    height: 100%;
  }

  &__left {
    font-size: 10px;
    padding-right: 5px;
    text-align: right;
    writing-mode: sideways-lr;
  }

  &__right {
    border-left: 1px solid #000;
    width: 100%;
  }

  &__category {
    border-bottom: 1px solid #000;
    font-size: 12px;
    padding: 0 0 5px 10px;

    &--green {
      color: #1b9d00;
    }

    &--blue {
      color: #467bde;
    }

    &--orange {
      color: #b67606;
    } 
  }

  &__content {
    padding: 10px 0 10px 10px;
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  margin: 0;
}

.row {
  display: flex;
}

.card {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 padding: 10px;
 width: 33.3%;
}

img {
  border: 5px solid #fff;
  margin-bottom: 15px;
  max-width: 100%;
}

.card__body {
  display: flex;
  height: 100%;
}

.card__left {
  font-size: 10px;
  padding-right: 5px;
  text-align: right;
  writing-mode: sideways-lr;
}

.card__right {
  border-left: 1px solid #000;
  width: 100%;
}

.card__category {
  border-bottom: 1px solid #000;
  font-size: 12px;
  padding: 0 0 5px 10px;
}

.card__category--blue {
  color: #467bde;
}

.card__category--green {
  color: #1b9d00;
}

.card__category--orange {
  color: #b67606;
}

.card__content {
  padding: 10px 0 10px 10px;
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot