问div中的文本不显示它所在的位置
EN

Stack Overflow用户

提问于 2020-04-03 10:44:43

回答 1查看 36关注 0票数 1

我已经在这个页面上呆了3天多了。似乎无法在本应位于图像下的新行上移动段落div。div应该是全宽的，并从新行开始。但是位置已经改变了。

奇怪的是，页脚文本位于正文的上方。我尝试了stackoverflow的很多解决方案。但我开始抓狂了。

我是不是弄坏了什么。

请帮帮忙。

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>

newline

paragraph

html

css

position

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-03 10:53:14

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

您可以将其替换为其html entity <

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

除此之外，center标签很久以前就被弃用了。对text-align: center使用如上所述的css。

此外，要使页脚位于浮动元素之后，请将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>