Question

我有一个2列的网格，我试图将我放在左列，而（＃footer-info）文本放在右列。我已经分配了网格区域，但是它们不会移动到各自的列。 h1和文章都在左列中彼此重叠。

Text is all stacked on top in the left column, I want to move the below text to the right (indicated in red)

footer {
  background-color: $navy;
  color: $white;
  text-align: center;
  >div {
    position: relative;
    @include md {
      display: grid;
      grid-template-columns: 50% auto;
      grid-template-areas: "glazetitle location";
    }
    section {
      position: relative;
      z-index: 20;
      h1 {
        font-family: 'Caveat', cursive;
        font-size: rem-calc(35);
        font-weight: 700;
        color: $white;
        z-index: 1;
        @include md {
          grid-area: glazetitle;
        }
      }
      #footer-info {
        @include md {
          grid-area: location;
        }
        p {
          font-family: 'Padauk', sans-serif;
          font-size: rem-calc(16);
          line-height: rem-calc(22);
          color: $white;
        }
        ul {
          display: flex;
          justify-content: center;
          padding: 15px 0px;
          li {
            margin: 0px 10px;
            a:link,
            a:visited {
              color: $white;
              &:hover,
              &:active {
                color: $gray;
              }
            }
          }
        }
      }
    }
    #footer-scribble {
      background-image: url('../img/Footer/footer-scribbles.svg');
      height: 300px;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      z-index: 10;
      margin-left: -200px;
      @include md {
        width: 100%;
        height: 250px;
        margin-left: -150px;
      }
    }
  }
}

<footer class="grid-container content-spacing subhead-spacing">
  <div>
    <section>

      <h1>Glaze Studio</h1>

      <article id="footer-info">
        <p>1488 Lunetta Street<br> Philadelphia, PA 19106</p>

        <ul>
          <li><a href="https://twitter.com/explore" target="_blank"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a>
          </li>
          <li><a href="https://www.instagram.com/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
          </li>
          <li><a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a></li>
        </ul>

        <p>215-925-3453<br> info@glazestudio.org
          <br> Icons: icons8.com</p>
      </article>

    </section>

    <aside id="footer-scribble"></aside>
  </div>

</footer>

如果需要提供更多信息，请告诉我，我仍然是这个平台的新手。 **地址/电话号码也是假的！不用担心。

Answer 1

我注意到了几件事。

您在中等的断点处定义了grid-template-area：“ glazetitle位置”，但从未将它们分配给受尊重的标签。在这种情况下，它将是您的section标签和aside标签（中等断点大小）。
为什么将直接在页脚标记内的div设置为relative。后续问题将是为什么将aside标签设置为绝对位置？

我想先解决这两个问题，然后可能会解决您的总体网格问题。

内容不会移动到分配的网格区域

1 个答案: