Faire apparaître une image flottante à côté d'un texte à l'intérieur d'une div

Question

J'ai une div avec du texte et une image qui devrait apparaître à droite du texte.

Le problème est que l'image apparaît bien à droite, mais elle n'est pas à côté du texte. J'ai utilisé float:right et l'option clear mais ça ne fonctionne toujours pas correctement.

Mon code est:

.box {
  width: 600px;
  height: 1000px;
  left: calc(45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  word-wrap: break-word;
}

.img {
  margin-left: 15px;
  float: right;
  display: inline-block;
  clear: both;
}

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.

CECI est ce que je veux faire.

Answer 1

Il suffit de mettre l'élément flottant en premier :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.

Il flottera vers la gauche et votre texte remplira l'espace sur la droite.

En plaçant le texte en premier, l'image ne sera affichée qu'après la fin de l'élément texte, donc l'image sera flottée sous le texte. (Tout comme si vous ne l'aviez pas flottée, elle apparaîtrait sous le texte).

Développez pour voir un extrait de code fonctionnel en action :

.box {
      width: 600px;
      height: 1000px;
      left: calc( 45% - 200px );
      top:20%;
      position: absolute;
      border-radius: 5px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      padding: 0px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
    }
    .content{
        border: 4px solid red;
        width: 600px;
        word-wrap:break-word;

    }
    .img{
        margin-left: 15px;
        float: right;
        display:inline-block;
        clear:both;
    }

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.

Answer 2

Pour obtenir le résultat attendu, la balise doit être placée avant la balise

dans votre HTML. Voici un exemple:

.box {
  width: 600px;
  height: 1000px;
  left: calc( 45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  word-wrap: break-word;
}

.img {
  margin-left: 15px;
  float: right;
  display: inline-block;
  clear: both;
}

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.

Answer 3

Soit mettre l'image avant la balise p, soit la mettre à l'intérieur de la balise p (voir mon extrait de code).

À propos : Lorsque vous appliquez float à un élément, inline-block n'aura aucun effet, et le clearing ne sert à rien dans ce cas particulier.

.box {
  width: 600px;
  height: 1000px;
  left: calc( 45% - 200px);
  top: 20%;
  position: absolute;
  border-radius: 5px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}

.content {
  border: 4px solid red;
  width: 600px;
  text-align: left;
}

.img {
  margin-left: 15px;
  float: right;
}

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.