0

Здравствуйте, подскажите пожалуйста почему при обтекании картинки 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>

3 ответа 3

1

img плавает, а список - нет.

Отправьте список в плавание

ul{ float:left;}
1

Например, можно убрать ширину у списка и задать 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>

0

Если необходимо чтобы элементы списка, лежащие ниже изображения, растягивались на всю ширину контейнера, то просто добавить 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>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.