CSS Float несколько плавающих слева элементов и один плавающий справа - PullRequest
4 голосов
/ 30 августа 2011

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

Ответы [ 3 ]

7 голосов
/ 30 августа 2011

С имеющимся у вас HTML это невозможно.

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

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

Я мог бы предложить разбить ваш HTML на блоки и сгруппировать их.

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

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

Вот код:

        ul {
            width: 200px;
        }
        .content {
            float: left;
            width: 100px;
        }
        blockquote {
            float: right;
            width: 50px;
        }
        a {
            float: left;
            clear: both;
        }
    <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>

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

3 голосов
/ 30 августа 2011

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

изменить:

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

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

0 голосов
/ 30 августа 2011

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

Вы также можете задать ширину <ul> и сместить последний элемент вправо, чтобы он оставался правым независимо от ширины родительского элемента. Другой пример .

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

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

...