我的一个div表现异常，我不知道为什么

由 发布于 csssasshtml
 收藏

我正在通过构建通用的投资组合页面来训练我的编码。到目前为止，我有一个部分，其中包含带有一些文本的英雄图像，然后是一个具有一些网格列的部分，稍后将在其中显示一些项目，然后是一个关于部分，这也是一个带有图像和一些文字的网格列。 我被困在这里，因为某种原因，“关于”部分中的div表现得很奇怪。

我可以在scss中更改图像值，但不能更改文本。 此外，位于about部分下方的媒体查询也不会注册。 当我按比例缩小时，我的About div也会浮于其他内容上。 我尝试删除“英雄”部分和“关于”部分之间的网格列，以查看它们是否是导致问题的原因，但是，否，“关于div”和媒体查询仍然无法响应我在scss文件中所做的任何更改（除了（关于图片），并且About div仍然会溢出我在图片和Hero部分之间放置的所有内容。

到底是怎么回事？

我的HTML

<div class="container__main">
  <div class="container__hero">
    <img class="container__hero__image" src="../assets/hero-background.jpg" />
    <div class="container__hero__text">
      <h1>Your Digital Handyman</h1>
      <p>Digital products with human insight</p>
      <button class="btn">Hire me</button>
    </div>
  </div>
<div class="container__card">
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
  <div class="container__card__item">
    <div class="container__card__image"></div>
    <div class="container__card__text">
      <span class="container__card__text__upperTitle">CSS / JavaScript</span>
      <h2>Train Project</h2>
      <p>
        A customer page I made for a fictional
        Metro company to showcase the use of ES6 Javascript.
      </p>
    </div>
    <div class="container__card__footer">
      <i class="fas fa-location-arrow fa-3x"></i>
    </div>
  </div>
</div>
<div class="about__section">
  <div class="about__section__hero">
    <img class="about__section__hero__image" src="../assets/casual-cellphones-chatting.jpg" />
    <div class="about__section__hero__text">
      <p>
        The psychology
        <br />behind user
        <br />experience
      </p>
    </div>
  </div>
</div>

我的scss

$primary-color: #41b883;
$secondary-color: #34495e;
$primary-text-color: black;
$secondary-text-color: white;
.container__main {
  .container__hero {
    position: relative;

    .container__hero__image {
      height: 100%;
      width: 100%;
    }
    .container__hero__text {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      h1 {
        font-size: 2.5em;
        color: $secondary-text-color;
        text-align: center;
      }
      p {
        font-size: 1.4em;
        color: $secondary-text-color;
        text-align: center;
      }
      .btn {
        position: absolute;
        background-color: $primary-color;
        left: 33%;
        border: none;
        color: $secondary-text-color;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    }
  }
  .container__card {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: center;
    justify-items: center;

    .container__card__item {
      display: grid;
      grid-template-rows: 210px 210px 80px;
      grid-template-areas: "image" "text" "footer";
      border-radius: 18px;
      background: #fff;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
      text-align: center;
      margin: 50px;

      .container__card__image {
        grid-area: image;
        background: url("~@/assets/website1.jpg");
        background-size: cover;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
      .container__card__text {
        grid-area: text;
        margin: 25px;
        h2 {
          margin-top: 5;
          font-size: 28px;
        }
        p {
          font-size: 15px;
          font-weight: 300;
        }
        .container__card__text__upperTitle {
          font-size: 15px;
          color: green;
        }
      }
      .container__card__footer {
        grid-area: footer;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: $primary-color;
        cursor: pointer;
        .fas {
          color: #fff !important;
          margin-top: 15px;
        }
      }
    }
  }
  .about__section {
    position: relative;
    height: 100vh;
    display: grid;
    .about__section__hero {
      display: grid;
      grid-auto-columns: repeat(auto-fit, minmax(19rem, 1fr));
      .about__section__hero__image {
        max-width: 100%;
        height: auto;
        .about__section__hero__text {
          p {
            position: absolute;
            font-size: 10em;
            color: $secondary-text-color;
            font-weight: 800;
          }
        }
      }
    }
  }
  @media screen and (max-width: 759px) {
    .container__hero {
      .container__hero__text {
        .h1 {
          font-size: 1.3em;
        }
        .p {
          font-size: 1.1em;
        }
      }
    }
  }
}
评论