Discussion :

[jd_83]

Bonjour à tous,

Mon souhait est de placer à la droite d'une page une image et, en dessous, sa légende, de manière à ce que la légende ne déborde pas en largeur de l'image, et que la partie principale "enveloppe" le bloc image-légende.

Chacun des 2 objectifs est accessible séparément :
- div à droite, avec float-end
- non débord de largeur, avec d-flex dans le parent, et flex-grow-0 dans la div.

Par contre, les deux à la fois, ça ne fonctionne plus.

Dans ce codepen, le 1er objectif n'est pas atteint, même si l'inspecteur de code ne signale aucune anomalie pour le "float: right !important;".

Existe-t-il une solution pour parvenir à l'effet voulu ? Merci de votre aide.

[jreaux62]

Bonjour,

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
<div class="container">
  <div class="row">
    <div class="col-12 p-3" style="max-width:800px;margin:0 auto;background:#eee;">
      <h2 class="mb-4 text-center">Pages content avec image à droite</h2>
 
      <figure class="ps-3 pb-2 float-end" style="max-width:50%;">
        <img src="https://live.staticflickr.com/65535/51187636066_d397128977_h.jpg" alt="Snow" class="mw-100">
        <figcaption class="pt-2 fst-italic small">Nous rencontrons actuellement un incident sur le suivi en ligne des colis en ght, or disable floating, based on the current ...</figcaption>
      </figure>
 
      <h4>Aetatis voluit nec pueritiae acerbo</h4>
 
      <p>Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.</p>
 
      <p>Cumque pertinacius ut legum gnarus accusatorem flagitaret atque sollemnia, doctus id Caesar libertatemque superbiam ratus tamquam obtrectatorem audacem excarnificari praecepit, qui ita evisceratus ut cruciatibus membra deessent, inplorans caelo iustitiam, torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus cum abiecto consorte poenali est morte multatus. et ducebatur intrepidus temporum iniquitati insultans, imitatus Zenonem illum veterem Stoicum qui ut mentiretur quaedam laceratus diutius, avulsam sedibus linguam suam cum cruento sputamine in oculos interrogantis Cyprii regis inpegit.</p>
 
      <p>Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?</p>
 
    </div>
  </div>
</div>

N.B. style="max-width:800px;margin:0 auto;background:#eee;" n'est là que pour mieux visualiser l'effet d'enveloppement.
A supprimer donc.

[jd_83]

Bonjour et merci Jreaux.

En fait, ce qui fait fonctionner le truc, c'est je pense le "max-width". Mais, du coup, si l'image est petite, ça ne fonctionne guère. Ça ne donne pas le moyen (comme flex-grow-0) de maintenir au minimum (largeur d'une image, ou du mot le plus long) la largeur du conteneur.

Je laisse la discussion ouverte au cas-où...

Bonne journée.

[jreaux62]

Code html :

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

1
2
<figure class="ps-md-3 pb-2 float-end col-md-6">
   <img src="..." alt="..." class="w-100">

Et tu mets une image plus grande.