CSS Float multiples gauche flottait éléments et un droit flotté

Je vais avoir un peu de mal avec les chars. Je suis en train de jouer avec un site que je veux faire un peu sensible à l'aide de requêtes de média pour faire varier le navigateur largeurs. Comme il se trouve, la page s'affiche avec le flux de l'HTML, mais lorsque le navigateur est élargi, je veux la blockquote envelopper sur le droit de l'img, mais il ne enveloppements d'autant que l'élément p, immédiatement avant.

Voici le code 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>

Voici un exemple de mon code HTML et CSS look: http://jsfiddle.net/tempertemper/MZWD9/12/

Le site que je suis à la recherche pour le rendre plus large est ici: http://tempertemper.net/portfolio

Je suis sûr que je suis absent quelque chose d'évident, mais je ne peux pas savoir ce que c'est et je commence à me demander si le flotteur seulement flotteurs de deux éléments adjacents. Je suppose que je pourrais mettre un div autour de l'img et les balises p, mais je veux garder mon HTML agréable et propre.

Tous les éléments ont une largeur et la blockquote certainement s'inscrit dans l'élément conteneur (ie. la largeur de la li est suffisant pour contenir tous les éléments et leur rembourrage, les bordures, les marges, etc.). J'ai essayé flottante tous les éléments de la gauche, la barre de la blockquote que j'ai flotté droit. Essayé en utilisant clair:à gauche pour les éléments précédant le bloc de citation. Pas de joie.

Quelqu'un peut-il me mettre à droite?

Merci,

Martin.

Où est ton CSS?
Je pourrais écrire si vous le souhaitez. C'est une toile vierge à la minute. C'est surtout que je me demande si je suis absent fondamental float règle - peut-être que vous ne pouvez flotter deux éléments HTML à côté? J'ai pensé que tu pourrais flotter plusieurs éléments à gauche, puis flotter le dernier élément à droite et il allait s'asseoir à côté d'eux, en commençant en haut de la page où le premier élément est sur la gauche. Cela fait-il sens? Désolé - c'est un peu un de longue haleine!
Laissez-moi savoir si vous voulez toujours la CSS. Un lien vers la page en cours est tempertemper.net/portfolio de sorte que vous pouvez voir à quoi il ressemble avant que la page est élargi. Je veux la citation (qui est une div avec la classe "témoignage" sur le site en direct - j'ai affiné sur mon travail en cours du site) pour faire flotter le droit de l'img.
Pas de soucis, vous pouvez flotter autant d'éléments que vous le souhaitez. Flotter tout à gauche et ils s'alignent sur une seule ligne. Je vais faire un exemple pour vous.
Le lien vers le portfolio donne une erreur 404

OriginalL'auteur Martin | 2011-08-30

  1. 3

    La solution est assez simple. Encore plus simple alors vous avez pensé.

    changement: 

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

    En indiquant la blockquote premier (et flotter à droite), vous DITES d'abord que l'élément flotteur droit. Je sais que ce n'est pas logique, mais c'est la bonne réponse... Avait plusieurs fois moi-même.

    OriginalL'auteur Luuk

  2. 0

    Vous pouvez flotter l'ensemble de vos éléments de gauche de la ligne tout en haut à l'horizontale. Cochez cette exemple.

    Vous pouvez également donner à la <ul> une largeur et flotter le dernier élément à droite de sorte qu'il restera peu importe la largeur de l'élément parent. Un autre exemple.

    Si il n'y a plus, je peux les aider, je vais mettre à jour 🙂

    Après vos commentaires, vous devriez réviser la structure HTML d'avoir la blockquote directement après l'img ou le titre. Puis il va se comporter comme vous le souhaitez. Exemple.

    Salut Kyle, Merci pour votre aide. J'ai eu un coup d'oeil et on ne fait pas ce que je suis après. J'ai téléchargé un exemple de jsfiddle pour vous d'avoir un regard sur: lien
    J'aimerais que le "c'est une citation d'un texte" à s'asseoir en haut à droite, à côté du Titre ou de l'image... Merci
    Juste pour m'assurer que j'ai bien compris, vous voulez la blockquote être à côté de l'img lorsque le site est plus large?
    c'est vrai, oui. De sorte qu'il se lit comme une colonne qui descend du côté droit de l'ensemble de la li
    Je ne veux pas modifier le code HTML si possible, comme ça va être double objectif. Triple but une fois je suis aller faire un tour pour faire une version pour smartphone.

    OriginalL'auteur Kyle