Перенос текста вокруг адаптивного изображения

Есть ли способ обтекать отзывчивое изображение текстом с помощью макета сетки начальной загрузки? Я стараюсь избегать использования медиа-запросов. По сути, это то, к чему я собираюсь: Перенос текста вокруг адаптивного изображения

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

<div class = "container">
  <div class = "row">
    <div class = "col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-5 col-lg-4">
      <img class = "img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt = "Photo of me">
    </div>
    <div class = "col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

css image responsive-design bootstrap-4 grid

04.12.2018 09:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

<style type = "text/css">
      @media only screen and (max-width:480px) {
                  img {
                      display:block;
                      float:none;
                      margin:0 auto 20px !important;
                  }
              }
    </style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Test</title>
  </head>
  <body style = "margin:0; background:#000;">
   
    <div style = "max-width:600px; margin:0 auto; background:#fff; overflow:hidden;">
      <div style = "Margin:20px;">
        
        <img src = "https://www.clipartqueen.com/image-files/small-face-silhouette.png" align = "right" width = "140" height = "140" border = "0" style = "Margin:0 0 20px 20px; background:#E79851;"/>
            
        <p style = "Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Hic illum vitae iusto aspernatur tempora voluptatem id dolor reiciendis amet ea iste similique fuga, accusamus quibusdam, atque itaque quae sit dolorem asperiores facilis, fugit odio eveniet. Autem iusto nisi, minus sunt fuga quas sed expedita incidunt veniam nobis id ab. Blanditiis ullam laboriosam, quibusdam fugiat repellat labore nulla natus minima at, a veritatis nostrum dignissimos ipsa libero, voluptatem itaque!
            </p>
      </div>
    </div>
  </body>
</html>

как сказал OP: I am trying to avoid the use of media queries

— 04.12.2018 09:35

Да, это правильно. Я знаю, что могу решить эту проблему с помощью медиа-запросов, но спецификация проекта призывает их по возможности избегать. В основном я хочу знать; если два столбца расположены рядом друг с другом, и один из них длиннее (по вертикали), чем другой, существует ли способ переноса более длинного вертикального содержимого в новую строку / столбец под двумя другими.

— 04.12.2018 15:56

04.12.2018 09:33

Вы можете просто обернуть контент простым float:left

Попробуй это.

.row .col-md-5{float:left;}
.row{max-width:550px;}/*optional*/

<div class = "container">
  <div class = "row">
    <div class = "col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-5 col-lg-4">
      <img class = "img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt = "Photo of me">
    </div>
    <div class = "col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

PS: Я установил максимальную ширину, чтобы убедиться, что содержимое переносится.

04.12.2018 10:00

Вы можете использовать .float-left для обтекания изображения текстом:

.mw-25 {
  max-width: 25%;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">

<div class = "container">
  <div class = "row">
    <div class = "col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class = "row">
    <div class = "col">
      <div>
        <img class = "img float-left mw-25 border" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt = "Photo of me">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.Pellentesque viverra suscipit nibh, vitae laoreet diam semper non.</p>
        <p>Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac.</p>
      </div>
    </div>
  </div>
</div>

04.12.2018 10:04

Ответ принят как подходящий

Вы можете сделать его одним столбцом вместо использования двух столбцов. Класс float-sm-left, pr-3, pb-3 по умолчанию в Bootstrap 4 для выравнивания заполнения и перемещения элемента. Вы можете настроить отзывчивость, изменив float-sm-left на float-md-left, float-lg-left, float-xl-left в зависимости от ваших требований.

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class = "container">
  <div class = "row">
    <div class = "col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-12">
      <img class = "img-fluid float-sm-left pr-3 pb-3" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt = "Photo of me">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
      </p>
    </div>
  </div>
</div>

Это сработало для меня! Мне пришлось отредактировать размер изображения по умолчанию с помощью gimp, потому что он по-прежнему не заставлял масштаб, позволяющий им сидеть рядом друг с другом, но это сработало!

— 04.12.2018 17:02

Хорошо. В любом случае, если вы нашли решение, мы были бы счастливы.

— 05.12.2018 02:01

04.12.2018 10:08