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?
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
Vous devez vous connecter pour publier un commentaire.
Qui met le tag h3 avec la balise p.
http://www.quirksmode.org/css/display.html
ne fonctionne pas dans la version ie7 ou inférieur ou Firefox, donc pas la meilleure solution
display:run-in
ha, merci, ouais je n'avais pas utilisé avant, mais sa fait un peu frais. Et c'est assez utile site web pour vérifier des trucs comme ça aussi, je le garde en signet
Quirksmode est pure génial pour le web-dev et de référence.
Semble être la seule à travailler dans IE (11). Ne fonctionne pas dans Firefox (27), ni dans Chrome (32).
Malheureusement, cette fonctionnalité n'est pas prêt pour la production. Il n'a jamais été pris en charge dans Firefox, et il a été supprimé à partir de deux safaris (v8) et Chrome (v32). Il ne, cependant, de décrire exactement ce que l'OP a demandé.
OriginalL'auteur Ascherer