CSS: Aligner l'image en bas à droite d'une div remplie de texte

Question

Je me fais un site web mais je suis un peu bloqué sur un problème que je rencontre.

À l'intérieur d'une div, j'ai un bloc de texte avec une hauteur variable. À droite du texte, je veux positionner une image avec une largeur et une hauteur variables. Elle doit être alignée en bas. Aucun texte ne doit apparaître au-dessus de l'image.

Ça doit ressembler à ça : https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg

Voici le code que j'utilise actuellement :

HTML:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
   Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.

CSS

#section {
    position: relative;
}
#image {
    float: right;
    margin-left: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Avec ce code, l'image est alignée dans le coin inférieur droit de la div, mais la hauteur de la div est inférieure à la hauteur de l'image. De plus, le texte passe à travers l'image.

Answer 1

Vous avez besoin de quelques choses pour résoudre ce problème.

1) ajoutez un padding à droite de la section afin qu'elle ne se chevauche pas avec l'image.

#section {
    position: relative;
    padding-right:
}

2) lorsque vous ajoutez une div et que vous la flottez, le float retire l'image de l'écoulement du document, vous devez donc ajouter une autre div interne avec la même hauteur ou rendre la hauteur de la div égale à celle de votre image ou simplement ajouter une div flottante.

Voici une solution fonctionnelle: http://jsfiddle.net/zV3wm/

Answer 2

Je peux penser à une solution avec des largeurs d'image variables et des quantités de texte, mais cela nécessite une certaine duplication dans le balisage.

L'idée est de flotter à droite une version masquée de l'image, puis d'utiliser overflow:hidden pour que le paragraphe contre le flotteur ne passe pas en dessous. Ensuite, nous utilisons un positionnement absolu pour placer la version non masquée de l'image en bas du conteneur.

J'ai préparé une maquette sur http://jsfiddle.net/UmGNZ/ (j'ai donné une opacité partielle à l'image masquée, afin que vous puissiez voir où elle est ajoutée au document), mais pour un exemple pseudo-HTML :

Vous pourriez également essayer une solution pure CSS en utilisant des tableaux CSS si vous n'avez pas à prendre en charge IE7, mais sinon cela devrait fonctionner jusqu'à IE6 si vous utilisez visibility:hidden à la place de opacity, et ajoutez un zoom:1 au style du paragraphe.

Answer 3

Cette idée qui permet une taille d'image flexible : http://jsfiddle.net/David_Knowles/F3zZU/4/

.cell {display:table-cell;}

#section {
    position: relative;
    width:300px;
}
#image {
    vertical-align: bottom;
}

       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.

Answer 4

Je ne pense pas que je suis correct mais vous pouvez y parvenir en utilisant float right et margin-top.

#img {
    float: right;
    margin-top: -140px;
}

Consultez ceci: http://jsfiddle.net/wrujx/

Answer 5

Je pense que la meilleure solution est d'utiliser un peu de jQuery (JavaScript) et de laisser chaque partie faire son travail en le gardant aussi simple que possible. Voici ce que vous auriez :

HTML

    votretexteici

CSS

#wrapper{

    width:600px;
    border:1px solid #000000;

}

p{

    display:inline-block;
    margin-right:20px;

}

img{

    vertical-align:bottom;

}

jQuery

var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)

Et voilà simple et clair sans balises supplémentaires et positionnement compliqué.