div 中的文本未显示其所在位置

Question

我已经在这个页面上呆了 3 天多了。似乎无法将段落 div 移动到本应位于图像下方的新行上。 div 应占满宽度并另起一行。但是位置变了。

奇怪的是，页脚文本在正文中排在最前面。我尝试了很多来自 Whosebug 的解决方案。但我开始吓坏了。

我是不是弄坏了什么。

请帮忙。

The text that should be going on a new line, but keeps on staying here.

文本在执行时甚至没有正确定位。标记的底部文本应该在页脚中。（见上面链接的图片也参考我的代码）

注意：错误显示在桌面计算机上。手机看没问题。

h1 {
  text-align: center;
}


/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
  img {
    width: 100%;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
  img {
    width: 100%;
  }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  img {
    width: 60%;
  }
  .mtxt {
    width: 40%;
    margin-top: 15%;
  }
  .lefty {
    float: left;
  }
  .righty {
    float: right;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Be You :)</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1>Being Different is NOT a Sin</h1>

  <img src="images/undraw_both_sides_hbv3.svg">
  <div>
    <p>You might think what might people say.</p>
    <p>And somehow you became extremely self-conscious.</p>
  </div>

  <img src="images/undraw_friends_online_klj6.svg" class="righty">
  <div class="mtxt lefty">
    <p>Was it your Friends, Family or the Society... Whatever it was, it changed you.</p>
  </div>


  <div>
    <!--this should be on a seperate new line  also it shoould be centered-->
    <div>
      <p>Do you have any regrets?</p>
      <p>Yes?</p>
      <p>And are you feeling helpless?</p>
    </div>
    <!--this is the end of the new line -->
    <div>
      <img src="images/undraw_feeling_of_joy_ioj2.svg" class="lefty">
      <div class="mtxt righty">
        <p>Well, whatever your concern is, remember you can overcome anything.</p>
      </div>
    </div>

    <div>
      <img src="images/undraw_things_to_say_ewwb.svg" class="righty">
      <div class="mtxt lefty">
        <p>And if you say you are not sure.</p>
        <p>Just think about the worst possible case that could happen.</p>
        <p>Don't just keep that in your mind as a secret.</p>
      </div>
    </div>

    <div>
      <img src="images/undraw_phone_call_grmk.svg" class="lefty">
      <div class="mtxt righty">
        <p>We could help. More than that, you know...</p>
        <p>I could help you.</p>
      </div>
    </div>

    <div>
      <img src="images/undraw_navigator_a479.svg" class="righty">
      <div class="mtxt lefty">
        <p>So, communicate your fears. It's how we deal with those fears/concerns.</p>
        <p>Again remember there is nothing in this world that doesn't have a solution.</p>
      </div>
    </div>

    <div>
      <img src="images/undraw_to_the_moon_v1mv.svg" class="lefty">
      <div class="mtxt righty">
        <p>To achieve it might take time. But yes. We can overcome it.</p>
        <p>Just Believe!</p>
        <p>So let me take you on a journey.</p>
        <p>A journey that will lift you up, to be your higher self.</p>
      </div>
    </div>

  </div>
  <div>
    <div>
      <center>
        <!--this is also on a new line and centered at the bottom -->
        <p>And always remember to look on the bright side of everything.
          <3</p>
            <!--new line ends-->
      </center>
      <img src="images/undraw_true_love_cy8x.svg">
    </div>
  </div>
</body>

</html>

Answer 1

<3 可能会让浏览器不知道如何呈现页面，因为 < 是 html 标记的开始。

你可以用它的html entity替换它 <:

<p style="text-align: center">And always remember to look on the bright side of everything.&lt;3</p>

除此之外，center tag was deprecated long time ago. Use css 同上 text-align: center。

此外，要在浮动元素应用 clear: both 到包含所有页脚的 div 之后获得页脚，因为其他内容是浮动的，并且您希望此元素位于其他元素下方浮动的元素。

<div style="clear: both">
  <div>
    <p style="text-align: center">And always remember to look on the bright side of everything.&lt;3</p>
    <img src="images/undraw_true_love_cy8x.svg">
  </div>
</div>

我使用了内联样式使其更容易，但您可以像使用其他 css 代码那样来使它更清晰。您可以使用 footer tag 包裹所有页脚。

div 中的文本未显示其所在位置

Text in a div not displaying where it is positioned

html

css

position

newline

paragraph