Стилизация изображений с помощью CSS в ul li list

Question

У меня возникла проблема и надеюсь, что сообщество stackoverfolw может мне помочь.

Я хочу разместить изображения с текстами в указанном порядке, поэтому я использую ul> li. Моя проблема начинается, когда я пишу абзац, который имеет меньше текста, чем высота изображения, следующий абзац идет рядом с ним, чего я не хочу. Я знаю, что это плохо описано, поэтому я прикрепляю его образ. Вот HTML этого скриншота

<ul><li> 
<h2>title</h2> 
<img src="" class="alignleft" width="200px"/> My text content 
</li> 
repeat the same again 
</ul> 

CSS для AlignLeft является

.alignleft{float:left;} 

Если я установить CSS для .alignleft{float:left;clear:both} то эта проблема решается, но еще одна проблема поднимается.

Вот скриншот из перечисленных элементов стилизованных с .alignleft {поплавком: слева; ясно: как;} Объявление справа имеет .alignright{float:right;} стиль. Из-за ясно: оба стиль нет контента с объявлениями.

Есть ли какой-либо вариант, чтобы я мог достичь обоих? Как изображения ниже

Answer 1

.alignleft{float:left;clear:left} Используйте для очистки только левые направленных поплавков.

Смотрите также

• All about floats (статья об использовании float и clear)
• CSS 2.1: 9.5.2 Controlling flow next to floats: the 'clear' property:

  ясно: слева: Зазор сгенерированного блока устанавливается в размере необходимо поместить верхний пограничный край ниже нижнего внешнего края любого слева-плавающий ящики, которые были получены из элементов ранее в исходном документе.