Обтекание блоков
возникла такая проблема. Нужно сделать обтекание двух блоков, в первом будет картинка либо слайдер, во втором - несколько параграфов или\и списков. Нужно чтобы картинка занимала 50% места слева, а текст, в зависимости от его количества, тоже 50% справа, но если текста больше, чем высота картинки, то он должен переноситься на левую часть и занимать 100% под картинкой. Ниже примерна верстка
<div class="w-100">
<div class="content__img row justify-content-center col-12 col-md-7">
<img src="...">
</div>
<div class="d-inline col-12 col-md-5">
<div>
<h2 class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<ul class="list">
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </li>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </li>
</ul>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit:
</p>
<ul class="list">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
</div>
</div>
</div>Ответы (1 шт):
Автор решения: Zhihar
→ Ссылка
Вам это нужно?
.image {
width: 50%;
float: left;
margin: 10px;
}
пример:
.image {
width: 50%;
float: left;
margin: 10px;
} <div class="w-100">
<div class="content__img row justify-content-center col-12 col-md-7">
<img class = 'image' src="https://rusunion.com/img/news/2018/07/29/sbezhavshiy-vo-vremya-shtorma-iz-delfinariya-anapy-morskoy-kotik-misha-nashelsya-v-gruzii-blog.jpg">
</div>
<div class="d-inline col-12 col-md-5">
<div>
<h2 class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
<ul class="list">
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </li>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </li>
</ul>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit:
</p>
<ul class="list">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>
</div>
</div>
</div>