Неправильное обтекание картинки

190
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>

READ ALSO
Mysql делает 2 одинаковых записи
MySQL

Mysql делает 2 одинаковых записи

Имеется скрипт сообщений, все работает на LAMP - сервереПри умеренных нагрузках записи INSERT (сообщения от пользователей) задваиваются

 174
UPDATE SELECT всегда возвращает 0
MySQL

UPDATE SELECT всегда возвращает 0

Пытаюсь таким запросом обновить записи в таблице, но в итоге в столбце region_id всегда получаю 0, хоть в таблице towns и есть записи соответствующие...

 204
Как вывести список данных
MySQL

Как вывести список данных

Здравствуйте! Есть две таблицы в базе данных MySql и все нужные php файлы: в одной названия отделов, в другой названия отделов и имена людейВ android...

 246
высчитать и записать разницу времени
MySQL

высчитать и записать разницу времени

В БД хранится дата в формате 2017-03-24 04:05:10

 259