У меня проблемы с поплавками. Я играю с сайтом, который я хочу сделать немного адаптивным, используя медиа-запросы для браузеров различной ширины. Когда он находится, страница отображается с потоком HTML, но когда браузер расширен, я хочу, чтобы блочная цитата была обернута справа от img, но она переносится только до элемента p непосредственно перед ним.
Вот HTML:
<ul>
<li>
<h3>Title</h3>
<img src="images/image" />
<p>This is some text.</p>
<p>Here's some more text.</p>
<p>And heres yet another block of text.</p>
<blockquote>This is a quote.</blockquote>
<a>A link</a>
</li>
</ul>
Вот пример того, как выглядят мои HTML и CSS: http://jsfiddle.net/tempertemper/MZWD9/12/
Сайт, который я хочу расширить, находится здесь: http://tempertemper.net/portfolio
Я уверен, что мне не хватает чего-то очевидного, но я не могу понять, что это такое, и я начинаю задумываться, не плавает ли float только два смежных элемента. Я полагаю, я мог бы поместить div вокруг тегов img и p, но я хочу, чтобы мой HTML был красивым и чистым.
Все элементы имеют ширину, и цитата определенно помещается в содержащий элемент (т. Е. Ширина li достаточна, чтобы вместить все элементы и их отступы, границы, поля и т. Д.). Я попытался перебрать все элементы слева, за исключением цитаты, которую я вывел справа. Пробовал использовать clear: left для элементов, предшествующих кавычкам блока. Радости нет.
Может кто-нибудь поправить меня?
Спасибо
Martin.