Alignement texte et image horizontal
Résolu/Fermé
Cléclé66
Messages postés
181
Date d'inscription
dimanche 23 septembre 2012
Statut
Membre
Dernière intervention
9 août 2016
-
Modifié par Cléclé66 le 6/07/2015 à 21:47
Cléclé66 Messages postés 181 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 9 août 2016 - 6 juil. 2015 à 22:04
Cléclé66 Messages postés 181 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 9 août 2016 - 6 juil. 2015 à 22:04
A voir également:
- Alignement texte et image horizontal
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Si cellule contient texte alors ✓ - Forum Excel
- Corinne copie un texte sur le web et le colle dans un document avec l'option "texte non formaté" (aussi appelée "texte sans mise en forme"). qu'est-ce qui est conservé ? - Forum Bureautique
- Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Photoshop
1 réponse
Utilisateur anonyme
Modifié par ZeNairolf le 6/07/2015 à 22:03
Modifié par ZeNairolf le 6/07/2015 à 22:03
Change ça dans ton HTML
Et ceci dans ton CSS:
Il fallait laisser de l'espace pour l'image, donc le réduire à 80% vu que ton image fait 20%, ensuite le passer en float: left; pour laisser l'image "monter".
Le overflow: hidden sur .box2 est obligatoire, sinon tous les éléments ajoutés par la suite vont fusionner avec le contenu. Et le padding-bottom c'est juste pour laisser un peu d'espace en dessous. Tu peux le supprimer.
<div class="box2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu rutrum felis. Etiam mi nunc, lacinia eget sodales quis, dictum vel nisi. Integer condimentum porta ligula non rhoncus. Morbi luctus, eros vitae tempus malesuada, risus metus elementum risus, ornare efficitur justo ante et tortor. In hac habitasse platea dictumst. Donec quis sagittis quam, sed facilisis nunc. Nulla ornare pellentesque quam vitae lacinia. Nam nisi erat, pretium sed erat at, elementum feugiat enim. Duis ultrices lacinia justo, id ullamcorper nisl pretium nec. Pellentesque feugiat, velit ac pulvinar efficitur, ipsum odio ullamcorper elit, in interdum urna risus ac nisl. Praesent ornare volutpat ex et sagittis.</p> <img src="lib/img/img.jpg" alt=""/> </div>
Et ceci dans ton CSS:
.article1 > .box2 { display: block; overflow: hidden; padding-bottom: 10px; } .article1 > .box2 > p { float: left; width: 80%; } .article1 > .box2 > img { float: right; width:20%; }
Il fallait laisser de l'espace pour l'image, donc le réduire à 80% vu que ton image fait 20%, ensuite le passer en float: left; pour laisser l'image "monter".
Le overflow: hidden sur .box2 est obligatoire, sinon tous les éléments ajoutés par la suite vont fusionner avec le contenu. Et le padding-bottom c'est juste pour laisser un peu d'espace en dessous. Tu peux le supprimer.
6 juil. 2015 à 22:04