Je fais un site dans lequel des images doivent être présentées à côté du contenu textuel - une sorte de mise en page pseudo-deux colonnes, car les images et le texte proviennent d'une source HTML unique.
J'ai trouvé tout à fait Un moyen simple de le faire en mettant les images comme leurs propres paragraphes et en les flottant. Y aurait-il toujours un moyen plus simple (en ce qui concerne HTML) de le faire sans ces paragraphes supplémentaires et en attribuant uniquement des CSS supplémentaires aux images? P>
Si l'image flottée est dans le même paragraphe que le texte, Ensuite, les paragraphes avec et sans images seraient différentes de largeur. p>
CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }
Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>
Is the above possible with this HTML?
<p><img src="image.jpg" /></p>
5 Réponses :
cherchez-vous cela? Ceci correspondrait à toutes les étiquettes IMG à l'intérieur des balises P.
Mais je recommande de toujours utiliser des classes ou des identifiants pour correspondre aux règles CSS. Il suffit d'utiliser le nom de la balise peut conduire à des pièges ennuyeux, tôt ou ultérieurement ou plus tard. Modifier MHM, peut-être que je t'ai tort. Vous souhaitez appliquer AFAIK Il n'y a aucun moyen de sélectionner un parent d'un élément spécifique. Il fonctionne toujours dans la direction parent -> enfant, non enfant -> parent. float: droite; Largeur: 900px; sur les éléments P, pas les éléments IMG ...
Jusqu'à voté, comme c'est certainement le plus facile et probablement le plus maigre. Je suggérerais peut-être ajouter «clair: laissé» mais ce n'est probablement pas nécessaire.
Salut, pas exactement. Comme le contenu du site sera mis à jour avec un éditeur WYSIWYG comme TinyMCE par des personnes sans aucune connaissance de HTML / CSS, je cherche un moyen d'obtenir le positionnement de l'image avec le plus petit balisage supplémentaire que possible. Donc, les classes pour les images seraient ok, je me demandais simplement s'il y a un moyen de faire ce qui précède sans paragraphes supplémentaires. Une autre façon de le mettre: je cherche le plus simple marquage HTML pour obtenir ce type de positionnement de l'image: WIDERSCREEN.FI/2006/3/ELOKUVALLINEN_KAUHUKOKEMUS.HTM
non. Avec l'img à l'intérieur du P, vous pouvez flotter à droite de l'image, mais le texte ne restera pas dans une colonne. Il va envelopper sous l'image. Toute marge droite ou rembourrage que vous postulez à la P s'appliquera également à l'IMG.
Puisque vous avez deux informations connexes, je les envelopperais dans une div puis de les positionner dans la DIV. P>
.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}
<div class="info">
<img src="image.jpg" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
en réponse à Réponse de Emily . < BlockQuote>
non. Avec le img à l'intérieur de la p, vous pouvez flotter l'image à droite mais le texte ne restera pas dans une colonne. Ce sera envelopper sous l'image. Tout droit Marge ou rembourrage Vous postulez au P s'appliquera également à l'IMG.
Alors qu'elle a raison, aussi loin qu'elle va, il y a une solution de contournement. Bien que ce ne soit pas idéal: ceci doit placer l'image dans le coin supérieur droit du ... sauf si vous souhaitez ajouter un Clearfix p , tout en forçant le texte dans une colonne entre la limite gauche de l'élément p et le remplissage droit de 950px. Pas idéal, et un peu désordonnée, mais cela permet l'effet colonnaire sans ajouter des balises supplémentaires. BR ( BR.CLEARFIX: Affichage: Bloc; Clair: les deux ) à la fin du paragraphe (pour forcer la balise p pour prolonger l'image des paragraphes courts) .
Positionnement de l'image à droite fonctionnera tant que les images sont =
Ouais; Je n'ai jamais pensé à clarifier qu'I -J'ai viennent de prendre le 900px de l'exemple sans pensée, mais je l'ai un peu impliqué ... peut-être ... un peu ... dans le code CSS-Commentaire. > toux <=)
Oui, je viens de tester cela, Assurez-vous d'utiliser le strict DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>
<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
J'ai concocté cette ligne de code ici pour m'aider à positionner un texte exactement où je le voulais. Je pourrais être une manière novice, mais cela a fait le travail simplement et facilement et précis. et tout HTML.
<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
L'attribut style remplace chaque autre style (sauf ceux avec ! Important , et ceux-ci ne sont pas bons non plus), qui défait le point de cascade Feuilles de style et permet aux gens d'utiliser ! Important , et ce n'est pas bon pour plus ou moins la même raison. Il a également l'air désordonnée et brise la belle séparation entre la présentation et le contenu fourni par la plate-forme.