Текст внутри плавающего div не отвечает - PullRequest
Новая
       0

Текст внутри плавающего div не отвечает

3 голосов
/ 15 февраля 2020

В следующем коде: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid View</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      font-size: 1vw;
    }
    
    body {
      padding: 0 0;
      margin: 0;
      background-color: violet;
      font-size: 1.1rem;
    }
    
    .container {
      width: 80%;
      margin: 0 auto;
    }
    
    header {
      background-color: rgb(133, 76, 76);
      border: .01rem solid rgb(133, 76, 76);
      margin-bottom: 4%;
      position: fixed;
      top: 0;
      left: 10%;
      right: 10%;
      padding: 0;
    }
    
    header h1 {
      text-align: center;
    }
    
    .row {
      background-color: blueviolet;
      margin-bottom: 4%;
    }
    
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    
    [class*="col-"] {
      float: left;
      padding: 15px;
      background-color: whitesmoke;
    }
    
    .col-1 {
      width: 8.33%;
    }
    
    .col-2 {
      width: 16.66%;
    }
    
    .col-3 {
      width: 25%;
    }
    
    .col-4 {
      width: 33.33%;
    }
    
    .col-5 {
      width: 41.66%;
    }
    
    .col-6 {
      width: 50%;
    }
    
    .col-7 {
      width: 58.33%;
    }
    
    .col-8 {
      width: 66.66%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.33%;
    }
    
    .col-11 {
      width: 91.66%;
    }
    
    .col-12 {
      width: 100%;
    }
    
    div#three div.col-3 {
      width: 24%;
      margin-right: 1.33%;
    }
    
    div#three div.col-3:last-of-type {
      margin-right: 0;
    }
    
    @media only screen and (max-width: 780px) {
      html {
        font-size: 2.5vw;
      }
      body {
        padding-top: 17%;
      }
    }
    
    @media only screen and (max-width: 480px) {
      html {
        font-size: 3vw;
      }
      body {
        padding-top: 17%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="one" class="row">
      <div class="col-12">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>

    <div id="three" class="row">
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>
  </div>
</body>

</html>

Веб-страница разрывается на отметке 470px (проверяется с помощью панели инструментов устройства с помощью chrome inspect). Это происходит потому, что текст внутри 4 с плавающей точкой divs во втором ряду не отвечает и выходит из div в 470px. Это происходит только тогда, когда текст находится внутри плавающего элемента, когда я снова делаю элемент блока divs, текст становится отзывчивым.

Может кто-нибудь сказать мне, почему это происходит?

Ответы [ 3 ]

2 голосов
/ 15 февраля 2020

Надеюсь, это поможет вам. Добавлено ниже упомянутых CSS

    div#three div.col-3{
        width: 49%;
        margin: 0 0.5%;
        margin-bottom: 5px;}


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid View</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      font-size: 1vw;
    }
    
    body {
      padding: 0 0;
      margin: 0;
      background-color: violet;
      font-size: 1.1rem;
    }
    
    .container {
      width: 80%;
      margin: 0 auto;
    }
    
    header {
      background-color: rgb(133, 76, 76);
      border: .01rem solid rgb(133, 76, 76);
      margin-bottom: 4%;
      position: fixed;
      top: 0;
      left: 10%;
      right: 10%;
      padding: 0;
    }
    
    header h1 {
      text-align: center;
    }
    
    .row {
      background-color: blueviolet;
      margin-bottom: 4%;
    }
    
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    
    [class*="col-"] {
      float: left;
      padding: 15px;
      background-color: whitesmoke;
    }
    
    .col-1 {
      width: 8.33%;
    }
    
    .col-2 {
      width: 16.66%;
    }
    
    .col-3 {
      width: 25%;
    }
    
    .col-4 {
      width: 33.33%;
    }
    
    .col-5 {
      width: 41.66%;
    }
    
    .col-6 {
      width: 50%;
    }
    
    .col-7 {
      width: 58.33%;
    }
    
    .col-8 {
      width: 66.66%;
    }
    
    .col-9 {
      width: 75%;
    }
    
    .col-10 {
      width: 83.33%;
    }
    
    .col-11 {
      width: 91.66%;
    }
    
    .col-12 {
      width: 100%;
    }
    
    div#three div.col-3 {
      width: 24%;
      margin-right: 1.33%;
    }
    
    div#three div.col-3:last-of-type {
      margin-right: 0;
    }
    
    @media only screen and (max-width: 780px) {
      html {
        font-size: 2.5vw;
      }
      body {
        padding-top: 17%;
      }
      div#three div.col-3 {
        width: 49%;
        margin: 0 0.5%;
        margin-bottom: 5px;
      }
    }
    
    @media only screen and (max-width: 480px) {
      html {
        font-size: 3vw;
      }
      body {
        padding-top: 17%;
      }
    }
    
    @media only screen and (max-width: 380px) {
      div#three div.col-3 {
        width: 99%;
        margin: 0 0.5%;
        margin-bottom: 5px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="one" class="row">
      <div class="col-12">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>

    <div id="three" class="row">
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
      <div class="col-3">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
          labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
      </div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 15 февраля 2020

Изменение размера шрифта на значение 'vw' текста внутри плавающих элементов решает проблему. Но я до сих пор не могу понять, почему.

0 голосов
/ 15 февраля 2020

Одно правило CSS может решить эту проблему без изменения точек останова или существующего исходного кода - 

div#three div.col-3{
  overflow-wrap: break-word;
}

Это не учитывает передовой опыт с точки зрения удобочитаемости для конечного пользователя, но устраняет ошибку, с которой вы столкнулись. Дальнейшая настройка с использованием дополнений в div .col-3 для мобильных устройств должна помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...