Текст в div не отображает, где он расположен - PullRequest
Новая
       8

Текст в div не отображает, где он расположен

1 голос
/ 03 апреля 2020

Я на этой единственной странице уже более 3 дней. Не могу переместить абзац div на новую строку, которая должна быть под изображением. Div должен занять полную ширину и начать с новой строки. Но положение изменилось.

Как ни странно, текст нижнего колонтитула находится в верхней части основного текста. Я перепробовал много решений от stackoverflow. Но я начинаю волноваться.

Я что-то сломал.

Пожалуйста, помогите.

Текст, который должен идти с новой строки, но остается здесь.

Текст даже не расположен правильно при исполнении. Нижний текст, который отмечен, должен быть в нижнем колонтитуле. (см. изображение, приведенное выше, также см. мой код)

Примечание. Ошибка отображается на настольном компьютере. Мобильный просмотр в порядке. 

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>

1 Ответ

1 голос
/ 03 апреля 2020

<3 может заставить браузер не знать, как отобразить страницу, поскольку < является началом тега html.

Вы можете заменить его на html entity &lt;: 

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

Кроме того, тег center долгое время считался устаревшим a go. Используйте 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, чтобы сделать его более понятным. И вы можете использовать тег нижнего колонтитула , чтобы обернуть весь нижний колонтитул.

...