Affichage de la rubrique en ligne avec le paragraphe suivant

Le suivant le balisage sémantique:

<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Je voudrais afficher l'en-tête en ligne avec le paragraphe, comme suit:

L'ÉTENDUE DES TRAVAUX. Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.

Option 1: flotteur de la rubrique.

Cela fonctionne tant que l'en-tête s'adapte sur une seule ligne. Quand ça ne marche pas, le flotteur forme un large bloc de sorte que le paragraphe commence à le droit de le bloquer, ou au-dessous au lieu de continuer en ligne:

| SCOPE OF | Lorem |
| WORK     | ipsum |
| sit amet, consect|

Option 2: afficher les éléments inline.

Une règle de style, tels que: h3, h3+* {display: inline;} pourrait fonctionner. Cela suppose qu'ils sont précédés & suivie par d'autres éléments de bloc. Sinon, d'autres éléments en ligne flux en eux. Aussi, le sélecteur adjacent (+) n'est pas disponible dans tous les navigateurs.

Option 3?

Sans ajout inutile classes ou l'emballage des éléments, et de le garder valide & sémantique (pas de span.h3 à l'intérieur du paragraphe!), est-il une meilleure façon de faire cette chose si simple?

comment un affichage:exécuter; y travailler? juste par curiosité la deuxième option est l'endroit où l'id d'aller, vous demandez-vous pourquoi vous devez avoir +*
Vous avez besoin de mettre display:inline sur l'élément qui suit le titre, ou bien le texte de l'alinéa encore afficher comme son propre bloc. (Juste faire le h3 display:inline signifie il forme son propre bloc anonyme quand il est entouré par d'autres éléments de bloc.)
Je ne suis pas familier avec display:exécuter; sans doute parce qu'il n'est pas largement soutenue. Mais, jetez-moi une réponse, si vous pouvez faire un cas pour elle: même si c'est juste "c'est comment il doit fonctionner dans des CSS de l'utopie".
Je suis en supposant que vous seriez incapable de prédire la largeur de la h3 élément. (Donc h3 {position: relative;} et h3 + p:first-line {margin-left: $width-of-h3; } n'est pas une option?)

OriginalL'auteur Andrew Vit | 2010-09-29