Обтекание текстом картинки bootstrap: Bootstrap обтекание текста — Stack Overflow на русском

Leave a Comment / Разное / By /

Bootstrap обтекание текста — Stack Overflow на русском

Вопрос задан

Изменён 7 лет 1 месяц назад

Просмотрен 11k раз

Добрый вечер! Не могу сделать обтекание текста нормально.

Вот что сейчас имею. То есть col-lg-5 картинка на половину блока.

col-lg-7 — текст справа от картинки

col-lg-12 — текст во всю ширину контейнера

Мне нужно как-то избавиться от col-lg-12, чтобы текст в одну колонку писать и он под изображением уже шел во всю длину.

        <div>
        <div></div>
        <div>
            <div>
                <div>
                </div>
                <div>
                    <div>
                        13.
 
 04.2015
                    </div>
                </div>
                <div>
                    <img src="img/test.jpg">
                </div>
            </div>
            <div>
                <div>
                    <h2>Заголовок</h2>
                    <div></div>
                    <h3>Заголовок 2</h3>
                    <div></div>
                    <p>
                        Длинный текст
                    </p>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                <p>
                    Длинный текст
                </p>
                </div>
            </div>
        </div>
    </div>
  • bootstrap

4

Не совсем понял суть вопроса. .Вам нужно, что бы текст после обтекания картинки был во всю ширину? Так просто не задавайте ему колонку, но оставьте в .row.

<div>
    <div>
        <img src="">
    <div/>
    <div>
        Длинный текст
    </div>
</div>

Решил вопрос, решение не идеальное, т.е. приходится игнорировать основные элементы верстки на Bootstrap. Но все же это выход.

http://dabblet.com/gist/7766924

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Обтекание блока Bootstrap

Подскажите, пожалуйста — как сделать блок с абсолютно-позиционированным содержимым внутри обтекаемым со всех сторон? Если через col ограничивать ширину, то по бокам от него всё нормально.

Но при попытке добавить содержимое снизу — всё сползается.

Сам блок :

<div>
            <img src="/content/builder/topka/drova/Biancone.png" alt="тег">
            <img src="/content/builder/krysha/1/Biancone.png" alt="тег">
            <img src="/content/builder/podium/1/Biancone.png" alt="тег">
            <img src="/content/builder/piliastr/1/Biancone.png" alt="тег">
            <img src="/content/builder/friz/1/Biancone.png" alt="тег">
    </div>
  • css
  • bootstrap

5

Сложно понять, что именно не так в вашей верстке по этому обрывистому коду. Добавляете ли вы остальной текст в другую колонку или в эту же? В чем суть назначения наложенных картинок? Если фиксированная ширина, то какая? Как вы обеспечиваете адаптивность?

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

Плюс ко всему эта колонка не будет иметь высоты. Для того, чтобы задать высоту и позиционироваться правильно создайте обертку для ваших изображений, задайте ей вашу фиксированную высоту(например 100px), сделайте ее родителем и ограничьте по ширине:

.img-container {
  position: relative;
  height: 100px;
  max-width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
  <div>
    <div>
      <div> <img src="https://dtpmhvbsmffsz.cloudfront.net/users/2015/12/02/565f89fa9f91f6d0ff001aae/t_565fb86d6258507629025e44.jpg" alt="тег">
        <img src="https://gamefaqs.akamaized.net/box/3/0/0/264300_thumb.jpg" alt="тег">
        <img src="http://эксклюзив-л.рф/images/phocagallery/Vodopadi/thumbs/phoca_thumb_m_vodopad1.
  jpg" alt="тег">
        <img src="https://otvetytut.ru/uploads/photo_83216_medium.jpg" alt="тег">
        <img src="https://l-userpic.livejournal.com/92950573/21156278" alt="тег">
      </div>
    </div>
  </div>
</div>

Но подозреваю, что вам нужно менять фон на полную ширину, тогда вам больше подойдет background-image:

.img-container {
  position: relative;
  height: 100px;
  max-width: 100%;
}

.img-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
  <div>
    <div>
      <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Обернуть текст вокруг изображения в начальной загрузке 3

Задать вопрос

спросил

Изменено 3 года, 4 месяца назад

Просмотрено 50 тысяч раз

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

Если вы прочитаете и увидите, в чем проблема, вы увидите, что это не дубликат….

вот как выглядит мой код

 

  

    <дел>
      <дел>
         
Вопреки распространенному мнению, Lorem Ipsum — это не просто r
 
        
Вопреки распространенному мнению, Lorem Ipsum — это не просто случайный текст. Он уходит корнями в произведение классической латинской литературы 45 г. до н.э., то есть ему более 2000 лет. Ричард МакКлинток, профессор латыни в Хэмпден-Сиднейском колледже в Вирджинии, отыскал одно из малоизвестных латинских слов, consectetur, в отрывке из Lorem Ipsum и, просмотрев цитаты этого слова в классической литературе, обнаружил несомненный источник.
  Lorem Ipsum происходит из разделов 1.10.32 и 1.10.33 «de Finibus Bonorum et Malorum» («Крайности добра и зла») Цицерона, написанного в 45 г. до н.э. Эта книга представляет собой трактат по теории этики, очень популярный во времена

        
Вопреки распространенному мнению, Lorem Ipsum — это не просто случайный текст. Он уходит корнями в произведение классической латинской литературы 45 г. до н.э., то есть ему более 2000 лет. Ричард МакКлинток, профессор латыни в Хэмпден-Сиднейском колледже в Вирджинии, отыскал одно из малоизвестных латинских слов, consectetur, в отрывке из Lorem Ipsum и, просмотрев цитаты этого слова в классической литературе, обнаружил несомненный источник. Lorem Ipsum происходит из разделов 1.10.32 и 1.10.33 «de Finibus Bonorum et Malorum» («Крайности добра и зла») Цицерона, написанного в 45 г. до н.э. Эта книга представляет собой трактат по теории этики, очень популярный во времена
jpg?sfvrsn=2" title="careers_1" alt="careers_1">
  • css
  • twitter-bootstrap-3

2

При использовании двух столбцов текст никогда не будет обтекать изображение.

Вы должны поместить изображение и текст в одну колонку и заполнить ее. Затем оберните текст и изображение в div и поместите их влево. Что-то вроде этого (код является примером и не тестировался):

 

   

   
Ваш текст будет здесь......

Вам может понадобиться некоторое поле на изображении, чтобы текст не прилипал к изображению

1

Это работает для меня.

 <дел>


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae aliquam optio mollitia, unde quas eaque voluptatem dignissimos eos maiores magni reprehenderit nisi, Corrupti nemo hic id cum squi officiis!

Мне ничего из этого не помогло. Мой рабочий код с использованием rails 5.2 и bootstrap 4.1:

 

  <дел>
    
       
Куча текста

       
Дополнительный текст