Question

我在div中有一个h1标签，我希望它能从右上方向下推到div的顶部。我曾尝试在h1上添加一个上边距，但这并没有帮助。当我在div＆＃39; #contact＆＃39;中放入一些文字时，突然h1向下移动。有没有办法在没有文字的情况下将h1向下移动##; contact＆＃39;？ 提前谢谢。

段：

＆＃13;

  <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>

＆＃13;

Answer 1

添加：

clear: both;

属性为h1所在的<div>。你浮动的DOM的div：left;因此，它实际上并不是你期望的那个dom。

然后你应该能够按照预期的那样将marign-top添加到H1。

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

1 个答案: