Discussion :

[moimp]

Bonjour,
J'aimerais utiliser float mais en positionnant l'image en bas du texte comme ceci:

Est-ce bien possible?
Voici mon code css qui ne fonctionne pas:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
img[data-pos='3']
{
	margin-left:10px;
	float:right;
	vertical-align:bottom;
}
img[data-pos='4']
{
	margin-right:10px;
	float:left;
	vertical-align:bottom;
}

P.S. Cette discussion est consécutive à celle-ci celle-ci.

[Invité]

Bonjour,

tu dois le savoir maintenant : un code CSS sans le HTML associé ne sert à rien.


Voilà une solution : https://codepen.io/jreaux62/pen/MGXMMX

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<section>
  <h2>Accueil en démo</h2>
  <figure class="img-pos-1">
    <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201" />
  </figure>
  <div>
    <p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes,
      cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures.</p>
    <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque parabat carnifex et tormenta. et ex is
      proscripti sunt plures actique in exilium alii, non nullos gladii consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur, quemquam absolutum.</p>
    <p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa
      se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus:
      nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.</p>
  </div>
  <figure class="img-pos-3">
    <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201" />
  </figure>
</section>

Remarque : j'ai été obligé de mettre 2 fois l'image.
Il faudra masquer celle qui ne convient pas (en fonction de "img-pos-xx")

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
section { position:relative; padding:10px 20px; border:1px dashed #ccc; width:600px; margin:0 auto; overflow:hidden; }
section figure { position:relative; padding:0; }
section figure img { display:block; }
section figure.img-pos-1 { float:left; margin:0 20px 10px 0; } /* haut - gauche */
section figure.img-pos-2 { float:right; margin:0 0 10px 20px; } /* haut - droite */
section figure.img-pos-3 { float:right; margin:10px 0 0 20px; } /* bas - droite */
section figure.img-pos-4 { float:left; margin:10px 20px 0 0; } /* bas - gauche */
 
section div p { margin:0 0 15px; text-align:justify; }

Le positionnement "en bas" du texte n'est pas terrible, mais c'est tout ce que j'ai pu faire (sans imposer des dimensions à l'image).

[danielhagnoul]

Bonjour,
J'aimerais utiliser float mais en positionnant l'image en bas du texte comme ceci [...].

[...]Voilà une solution : [...] Le positionnement "en bas" du texte n'est pas terrible, mais c'est tout ce que j'ai pu faire (sans imposer des dimensions à l'image).

Inspiré par le code de @jreaux62, je propose :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<section>
    <h2>Accueil en démo</h2>
    <div>
        <p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis
            iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum,
            cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum,
            nec diluere obiecta permissi nec defensi periere conplures.</p>
        <p>Quibus ita sceleste patratis Paulus cruore perfusus reversusque ad principis castra multos coopertos paene
            catenis adduxit in squalorem deiectos atque maestitiam, quorum adventu intendebantur eculei uncosque
            parabat carnifex et tormenta. et ex is proscripti sunt plures actique in exilium alii, non nullos gladii
            consumpsere poenales. nec enim quisquam facile meminit sub Constantio, ubi susurro tenus haec movebantur,
            quemquam absolutum.</p>
 
        <figure>
            <img src="https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1487190201" />
        </figure>
 
        <p>Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum,
            omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium
            graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam
            aliquando stivam adprehendit vel arborem .</p>
    </div>
</section>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
section {
    position: relative;
    width: 600px;
    padding: 0rem;
    margin: 0rem;
}
 
section figure {
    position: relative;
    padding: 0rem;
    margin: 0rem;
}
 
section figure>img {
    float: left;
    margin-left: 0rem;
    margin-right: 0.6rem;
    margin-bottom: 0.3rem;
}

Ce qui me donne :

[moimp]

Merci à vous deux.