Предотвращение «фрагментации» обернутого текста рядом с плавающим изображением - PullRequest
Новая
       12

Предотвращение «фрагментации» обернутого текста рядом с плавающим изображением

0 голосов
/ 19 февраля 2019

Я пытаюсь, чтобы этот текст не "фрагментировался" при меньших разрешениях.Это для назначения, и я ограничен использованием XHTML.

Изображение справа всплывает так: 

#image {
    width:420px;
    margin-left: 2%;
    height:370px;
    position:relative;
    float:right;
}

с XHTML: 

      <div id="image">
        <a href="http://en.wikipedia.org">
          <img src="picture.png"/>
        </a>
      </div>   

    <p><a href="https://en.wikipedia.org/wiki/Lorem Ipsum">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Очевидно, что эта «фрагментация» не появляется при больших разрешениях.

Есть ли элегантный способ сделать это в CSS2.1?

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Отличное решение @BryceHowitson.

Я только что решил эту проблему и придумал вариант вашего подхода.Я поместил медиа-запрос на абзац текста, который следовал за изображением.

Мое решение предназначено для свойства clear в абзаце, который следует за плавающим изображением.Когда разрешение экрана оставляет достаточно места рядом с плавающим изображением для удовлетворительной визуализации текста, абзац оборачивается вокруг изображения.Когда доступная ширина слишком мала для удовлетворительной визуализации текста, к абзацу применяется «clear: both», и абзац перемещается вниз под плавающим изображением.

Один «за» для этого подхода - CSSПравило применяется к элементу, поведение которого мы пытаемся контролировать.

Однако то, что решение @ BryceHowitson достигает, а мое - нет, это центрирование изображения, когда перенос последующего текста отключен.

CSS 

.p-clear {
    @media (min-width: 400px) {
        clear: none;
    }
    @media (max-width: 400px) {
        clear: both;
    }
}

HTML 

<img src="..." width="300px">
<p class="p-clear">text that needs at least 100px width</p>
0 голосов
/ 20 февраля 2019

Поскольку проблема переноса зависит от разрешения, вы можете легко решить эту проблему с помощью CSS Media Queries.Думайте об этом как о простом «если / еще» для CSS.

Итак, определите ширину окна, где перенос становится неприемлемым, и создайте правило max-width с этим номером.Это означает, что для ширины меньше вашего максимального размера, правило будет применяться.

Теперь при этом размере просто удалите плавающий элемент и установите изображение для отображения блока, который будет толкать текст вниз по странице. 

@media (max-width: 600px) {
  #image {
    display:block; // make image push text down
    float: none; // remove your float
    margin: 10px auto; // center the image in the available space
  }
}

Примечание. С медиазапросами должен быть ДНО вашего CSS, чтобы они переопределяли предыдущее правило И вам нужно только изменить переопределяемые атрибуты.

...