Question

此代码告诉我：image of broken layout 我只希望p标记类.mailtext位于页脚内部而不是外部。

我不知道这是否与你做作业有关，但这让我在过去两天疯了。第一个p标签（版权文本）工作正常，但第二个不是。我尝试了很多不同的解决方案。我提出了一些解决方案，例如更改overflow，z-index，使div容器更大，但没有任何效果。我是一名学生，没有经验。有任何想法吗？

.footer {
  /* more info footer  */
  height: 200px;
  background-color: black;
  margin-top: 80px;
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
}
.rights {
  /* copyright paragraph */
  text-align: center;
  color: white;
  margin-top: 170px;
}
.mail {
  /* mail icon properties */
  position: relative;
  bottom: 140px;
  left: 377px;
}
.mailtext {
  /* my email text properties */
  position: relative;
  color: red;
}
.feedback {
  /* feedback icon properties */
  position: relative;
  bottom: 190px;
  left: 430px;
}

<footer class="footer">
  <div class="moreinfo">
    <!-- more info footer -->
    <p class="rights">&#169;2017 annu.com. All rights reserved.</p>
    <!--   copyright symbol  -->
    <a target="_blank" href="">
      <img class="feedback" src="">
    </a>
    <!--  feedback logo -->
    <img class="mail" src="">
    <!-- mail logo -->
    <p class="mailtext">aaaaaa@gmail.com</p>
  </div>
</footer>
<!-- /Footer -->

Answer 1

.rights上有一个很大的margin-top。这使它从页脚底部附近开始。

它之后的段落出现在页脚下方（并在屏幕下方）。

您需要留出足够的空间（无论是通过增加页脚的高度，使用最小值而非固定高度，使用较小的段落边距或其他方式）来显示内容。

我无法弄清楚这段代码有什么问题

1 个答案: