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

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

<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

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

Вы хотите «остановить наложение текста вокруг изображения» ... однако скриншоты того, что вы хотите сделать, показывают именно это. Что ты хочешь?

— 02.05.2018 03:18

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

— 02.05.2018 03:27

Вы пробовали создать образ display:block в мобильном представлении в CSS?

— 03.05.2018 12:06

html css responsive-design

02.05.2018 03:10

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 410

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

Ответы 2

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

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

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

— 02.05.2018 04:19

02.05.2018 03:42

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

-> Пожалуйста, добавьте следующий код 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>

03.05.2018 11:23

Другие вопросы по теме

Нижний колонтитул HTML не работает на страницах Github

Предотвращение увеличения размера элементов подменю jQuery ContextMenu на мобильных устройствах

[переменная] .onclick = функция () не выполняется, в консоли нет ошибок

Bootstrap 4 панель навигации первый элемент навигации не выделен и проблема с прокруткой

Стиль в текстовом поле strust2

JavaScript: backgroundImage не меняется с onMouseOver

Масштабируемый элемент выходит за пределы области просмотра

Удалите верхнее поле bootstrap 4 navbar

Матрица перекоса SVG / преобразование без сжатия строк

Воссоздание веб-страницы путем копирования-вставки?

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

Ответы 2

Другие вопросы по теме

Похожие вопросы