Неправильное обтекание картинки
210
26 марта 2017, 04:32
Здравствуйте, подскажите пожалуйста почему при обтекании картинки border получается как бы в ней. Мне нужно чтобы border был возле текста, можно конечно просто прописать margin, но может есть какой-то более правильный способ?
Подскажите. Заранее спасибо
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
}
ul li{
border-left: 4px solid black;
}<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>Answer 1
img плавает, а список - нет.
Отправьте список в плавание
ul{ float:left;}Answer 2
Например, можно убрать ширину у списка и задать overflow: hidden;
img{
float:left;
width:300px;
}
ul{
list-style: none;
overflow: hidden;
}
ul li{
border-left: 4px solid black;
}<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>Или обернуть все содержимое (а обернуть все необходимо т.к. присутствует плавающий элемент) и задать списку тоже float:
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
float: left;
}
ul li{
border-left: 4px solid black;
}
.wrap {
width: 1000px;
overflow: hidden;
}
* { box-sizing: border-box; }<div class="wrap">
<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
</div>Вариант с flex и оберткой:
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
}
ul li{
border-left: 4px solid black;
}
.wrap {
display: flex;
align-items: flex-start;
}
* { box-sizing: border-box; }<div class="wrap">
<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
</div>Answer 3
Если необходимо чтобы элементы списка, лежащие ниже изображения, растягивались на всю ширину контейнера, то просто добавить overflow: hidden; элементам списка:
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
}
ul li{
border-left: 4px solid black;
overflow: hidden;
}<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47930 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23912 visits
- Как через css изменить цвет png изображения? 10406 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9281 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 30.3.2025 | 15:17