Прекратить обтекание текста вокруг изображения - PullRequest
Новая
       16

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

0 голосов
/ 02 мая 2018

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

<div class="text">​​​​​​​​ 
   <img src="/square.png" align="left" class="ms" alt=""/>
</div>
<div> 
   <span class="ms">Two paragraphs of text</span> 
</div>

Вот что он делает сейчас:

Изображение 1

Изображение 2

Изображение 3

Я бы хотел, чтобы текст сдвигался вниз, когда он сокращен до определенной ширины

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

-> Пожалуйста, добавьте следующий HTML & css код

-> Установить путь к изображению в теге img 

@media (max-width: 767px) {
  .image, .text { clear: both; }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
        <title> stop text wrapping around image </title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="image">
            <img src="file-path/test.jpg" align="left" class="ms" alt="image"/>
        </div>
        <div class="text"> 
            <span class="ms">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> 
        </div>
    </body>
</html>
0 голосов
/ 02 мая 2018

Вы должны написать CSS для размера экрана мобильного устройства (<768 пикселей), установите значение 100% для стиля ширины изображения. Пример, согласно вашему коду выше: </p> 

@media(max-width:768px){
    .text {
        width: 100%;
    }
}
...