CSS Поплавок с несколькими левыми элементами и один правый плавающий

Question

У меня проблемы с поплавками. Я играю с сайтом, который я хочу немного реагировать, используя медиа-запросы для различной ширины браузера. Когда он сидит, страница отображается с потоком HTML, но когда браузер расширяется, я хочу, чтобы blockquote завершался справа от 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

I Я уверен, что мне не хватает чего-то очевидного, но я не могу понять, что это такое, и я начинаю задаваться вопросом, плавает ли только плавающие два смежных элемента. Полагаю, я мог бы разместить div вокруг тегов img и p, но я хочу, чтобы мой HTML был красивым и чистым.

Все элементы имеют ширину, а блоквот определенно соответствует содержащему элемент (т. Е. Ширина li достаточна, чтобы содержать все элементы и их заполнение, границы, поля и т. Д.). Я пробовал плавать все оставшиеся элементы, заблокировать blockquote, который я правильно разместил. Пробовал использовать clear: left для элементов, предшествующих цитате блока. Нет радости.

Может ли кто-нибудь поставить меня правильно?

Thanks,

Martin.

Answer 1

С HTML-кодом у вас это невозможно.

Поток документа происходит в порядке HTML. Это означает, что при нормальных обстоятельствах элемент может влиять только на элементы, которые приходят после в HTML, что касается позиционирования.

float: right, например, перемещает элемент вправо, и все последующие за ним элементы будут проходить вокруг него влево. clear: left не позволит элементам течь слева от элемента, к которому он применяется.

Я мог бы предложить ломать свой HTML в блоки, и плавающие те:

<ul> 
    <li> 
     <h3>Title</h3> 
     <div class="content"> 
      <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> 
     </div> 
     <blockquote>This is a quote.</blockquote> 
     <a>A link</a> 
    </li> 
</ul> 

Затем можно удалить h3, img, p селектор и правило из CSS, и заменить его аналогичным правилом для .content

ul { 
    width: 200px; 
} 
.content { 
    float: left; 
    width: 100px; 
} 
blockquote { 
    float: right; 
    width: 50px; 
} 
a { 
    float: left; 
    clear: both; 
} 

В общем, я бы рекомендовал читать по документообороту, float, clear и position. Они, как правило, являются чрезмерно используемыми свойствами, и, похоже, вы использовали их здесь.

О, и скрипка для вас: http://jsfiddle.net/2bedr/1/

Answer 2

Вы можете перемещать все свои элементы влево, чтобы выровнять их по горизонтали. Check this example.

Вы также можете присвоить ширине ширины и поплавать последним элементом, чтобы он оставался правильным независимо от ширины родительского элемента. Another example.

Если есть больше я могу помочь, я буду обновлять :)

После ваших комментариев, вы должны пересмотреть структуру HTML, чтобы иметь BLOCKQUOTE непосредственно после IMG или названия. Тогда он будет вести себя так, как вы пожелаете. Example.

Answer 3

Решение очень простое. Еще проще, тогда вы подумали.

изменение:

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

Для этого:

<ul> 
    <li> 
    <h3>Title</h3> 
    <blockquote>This is a quote.</blockquote> 
    <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> 
    <a>A link</a> 
    </li> 
</ul> 

По констатирую BLOCKQUOTE первый (и плавать правильно), вы первый СКАЖИТЕ элемент плавать вправо. Я знаю, что это нелогично, но это правильный ответ ... Это было много раз.