Как я могу позволить содержанию отображаться рядом с изображением и под изображением также после окончания изображения? - PullRequest
Новая
       12

Как я могу позволить содержанию отображаться рядом с изображением и под изображением также после окончания изображения?

1 голос
/ 10 марта 2020

Я работаю над сообщениями в блоге в WordPress. То, что я хочу, - это то, что содержимое блога должно быть рядом с миниатюрой поста, и когда изображение заканчивается, содержимое должно автоматически покрывать остальную часть области, я имею в виду, что оно должно начинаться под изображением слева? Вот выходное изображение: enter image description here

В этой картинке я использовал сеточную систему bootstrap, которая состоит из 6 столбцов для миниатюр и 6 столбцов для содержимого, что нормально, но я хочу, чтобы содержимое автоматически заполняло оставшееся пространство под изображением? Как мне добиться этого, используя CSS или Bootstrap?

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Так как вы используете bootstrap. Это невозможно сделать с его текущей настройкой.

Установка его в 2 столбца при 50% с изображением в одном, а весь текст / контент в другом будет отображаться так же, как у вас.

Вам может потребоваться установить значение col или col-12 и добавить изображение / текст в той же области.

Подумайте о редакторе контента WordPress старой школы с выравниванием изображений.

Вот пример, который вы могли бы mimi c получить для переноса текста. Jsfiddle является рабочим примером. 

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      <img src="https://via.placeholder.com/150">
      Text goes here
    </div>
  </div>
</div>

https://jsfiddle.net/bazdin/kmn4u8xd/1/

0 голосов
/ 10 марта 2020

Вы можете сделать это -

HTML

<div class="container">
  <div class="row">
    <div class="col">
      <img class= "pull-left" style="margin: 0px 10px 0px 0px;" src="https://via.placeholder.com/150" width = "150">
      <h1>
          My Text Heading
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum ultrices mauris eu eleifend. Cras ut nisl lectus. Cras posuere maximus lectus, nec volutpat tellus sodales sit amet. Ut imperdiet imperdiet mauris quis convallis. Nunc erat lacus, faucibus laoreet justo ac, suscipit pulvinar sapien. Fusce id augue ut mauris molestie consectetur. Praesent eget volutpat quam, at ultricies dui. Pellentesque nec augue pharetra ex faucibus sollicitudin sit amet nec diam. Integer ut neque in arcu suscipit condimentum sit amet malesuada diam. Aliquam auctor sapien eros, ac mollis tortor fermentum sit amet.

Duis sed sagittis nulla. Aliquam vitae sodales ante. Aliquam id mattis metus. Suspendisse ultrices nunc ac urna mattis, finibus porta nibh luctus. Mauris condimentum magna a dui tempor, ut consequat mauris euismod. In vel commodo purus, vel luctus erat. Praesent consectetur auctor mattis. Morbi ac ultrices justo. Morbi posuere iaculis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc id mauris nisi.

Fusce sit amet massa sed risus malesuada feugiat ut ac purus. Praesent rhoncus quam nibh, nec sagittis orci dignissim quis. Donec vel venenatis nisl. Donec ultrices ante sed tempus ultrices. Maecenas eget suscipit lectus. Cras sodales, est vel finibus venenatis, mi est consectetur nulla, euismod varius massa turpis eget ante. Praesent et elit malesuada, porta nulla sed, luctus massa. Mauris nec justo mollis, porta arcu porta, convallis ante.
      </p>
    </div>

  </div>
</div>

Скрипка 

https://jsfiddle.net/guruling/xeyLk1qb/1/
...