HTML - div 中的第一个文本不会被下推

Question

我在 div 中有一个 h1 标签，我希望它从右上推到 div 的顶部。我试过在 h1 上添加上边距，但这没有帮助。当我在 div '#contact' 中放置一些文本时，h1 突然向下移动。有没有办法在“#contact”中没有文本的情况下将 h1 向下移动？ 提前致谢。

片段:

  <div style="float:left; margin: 0; width: 100%;background-color:#eeeeee;font-size: 20px;color: #252a30;text-align: center;">

    <style>
      .half {
        width: 40%;
        margin: 3%;
        font-size: 0.7em;
        display: block;
      }

      .hl {
        text-align: left;
        float: left;
      }

      .hr {
        text-align: right;
        float: right;
      }

      .project-tags {
        color: #b2c6cd;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 1px;
        opacity: 1;
        text-transform: uppercase;
      }

      .half ul, .half h1 {
        margin-bottom: 0px;
        margin-top: 0px;
      }

      .half h1 {
        margin-bottom: 5px;
      }

      .project-tags li {
        color: #fed766;
      }

      .project-tags span {
        color: #b2c6cd;
      }

      .half p {
        font-weight: 300;
        font-size: 20px;
      }

      .button-primary {
        margin: 10px 0 60px;
        color: #252a30;
        background-color: rgba(0, 0, 0, 0);
        border: 2px solid #FED766;
        height: auto;
        font-size: 1rem;
        line-height: normal;
        text-transform: uppercase;
        font-weight: 700;
        transition: all .3s ease-in-out;
        letter-spacing: 0;
        border-radius: 50px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        box-sizing: border-box;
        outline: 0;
        padding: 1.0rem 3.0rem;
      }

      .button-primary:hover {
        color: #FED766;
        background-color: #252a30;
        border: 2px solid #252a30;
        padding: 1.0rem 3.5rem;
      }

      .on-ylw {
        border: 2px solid #252a30;
      }

    </style>
    <p id="projects"></p>
    <h1>My Projects</h1>
    <p style="font-weight: 300;">Examples of my work</p>

    <div class="projects" style="margin: 0 15%;">
      <div class="half hl">
        <h1>Text</h1>
        <ul class="project-tags">
          <li><span>Python</span></li>
        </ul>
        <p>Text</p>

        <a href="link" class="button-primary">Visit Website</a>


      </div>
      <div class="half hr">
        <img src="image" alt="link" style="border-radius: 10px;position: relative: width: 100%; border-style: none;">
      </div>
    </div>

  </div>
  <div style="margin: 0; width: 100%; background-color: #FED766;position: static;">
      <div id="contact"></div>

      <br>
      <br>

      <h1 style="text-align: center; font-weight: bold; color: #000000; font-size: 40px;">Want To Contact Me</h1>
      <p style="text-align: center; font-weight: 300; font-size: 25px; color: #000000;">I'm currently accepting new projects and would love to hear about yours.</p>
      <br>
      <button class="button-primary on-ylw" style="display: table; margin: 0 auto;">Contact Me</button>
      <br>
      <br>
  </div>

Answer 1

添加:

clear: both;

<div> 的属性h1 在里面。DOM 上的 div 你有 float: left;因此它实际上并不在您期望的 dom 中。

然后您应该能够按预期将 marign-top 添加到 H1。