web-dev-qa-db-fra.com

Comment puis-je entourer le texte autour d'un div en bas à droite?

Chaque fois que j'essaie de faire quelque chose apparemment simple en CSS, cela ne fonctionne pas.

J'ai un contenu div qui contient une image 460x160. Tout ce que je veux faire est de positionner l'image dans le coin inférieur droit et d'envelopper mon texte.

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

Donc, je veux que ça ressemble à:

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

Le faire avec une image en haut à gauche ou en haut à droite est un gâteau:

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

Maintenant, comment puis-je pousser cela vers le bas? Le meilleur que j'ai créé jusqu'à présent sont:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

Dans ce cas, le texte ne s'imprime pas dans la marge, il y a donc un blanc au-dessus de l'image.

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

Dans ce cas, le texte s'imprime sur ou sous l'image.

Alors ... comment puis-je accomplir cela?

htmlcsscss-float
55
CodingWithSpike

Cela semble avoir été demandé avant (2003) , et avant (2002) , ou avant (2005)

Le dernier lien suggère en fait une solution basée sur javascript , mais pour une solution fixe (c'est-à-dire non fluide).

Il est cependant cohérent avec autres conseils trouvés

La seule façon de faire est de placer l’élément flottant quelque part au milieu du texte. Il est impossible de le rendre parfait tout le temps.

Ou celui-ci :

Cela consiste à faire flotter un élément "pousseur" vertical (tel que img, mais il est probablement plus judicieux d'utiliser simplement un div vide), puis à faire flotter l'objet souhaité sous celui-ci, à l'aide de la propriété clear. Le problème majeur de cette méthode est que vous devez toujours savoir combien de lignes il y a de texte. Cela rend BEAUCOUP plus facile les choses, et pourrait certainement être codé avec javascript, il suffit de changer la hauteur du "poussoir" à la hauteur du conteneur moins la hauteur du flottant (en supposant que votre conteneur ne soit pas fixe/hauteur minimale) . 

Quoi qu'il en soit, comme discuté dans ce fil , il n'y a pas de solution facile ...

Cletus mentionne dans les commentaires ce fil de 2003 , qui réaffirme le fait que cela ne peut pas être facilement réalisé.
Cependant, il fait référence à ceci l'article d'Eric Meyer , qui se rapproche de l'effet que vous souhaitez obtenir.

En comprenant le lien qui existe entre les flotteurs et le flux normal, et en expliquant comment la compensation peut être utilisée pour manipuler le flux normal autour des flotteurs, les auteurs peuvent utiliser des flotteurs comme outil de mise en page très puissant.
Comme les flotteurs n’étaient pas conçus à l’origine pour la mise en page, il peut être nécessaire de procéder à certains piratages pour les amener à se comporter comme prévu. Cela peut impliquer des éléments flottants contenant des éléments flottants, des éléments de "compensation" ou une combinaison des deux. 

Pourtant, Chadwick Meyer suggère dans sa réponse une solution basée sur le sélecteur CSS :before (variation de Leonard 's answer ).
Cela fonctionne fonctionne ici .

28
VonC

Eh bien ... c’est un très vieux billet, mais j’ai eu du mal à l’atteindre avec une petite solution de contournement. Je devais avoir une image alignée à droite, et exactement 170px du haut. Et il faut que le texte passe en haut, à gauche et en bas de l'image. Donc, ce que j’ai fait est de créer une largeur de 0px, une hauteur de 170px et un flottement correct. Ensuite, l'img flotterait et s'éclaircirait à droite et le tour serait joué!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

A plutôt bien fonctionné :)

16
Mauricio Morales

La solution la plus simple que j'ai trouvée consiste à envelopper img dans un élément div, puis à utiliser les valeurs padding-top et margin-bottom pour l'aligner.

C'est mon CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

et voici le HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

La raison pour laquelle le remplissage et la marge ont fonctionné pour moi est que je l'utilise dans l'élément parent "contentDiv" pour ajuster automatiquement la hauteur de la div en fonction du contenu. Pas sûr que ce soit d'aucune utilité.

1
Galimbek Sagidenov

Pour une solution jQuery, essayez le plugin lowFloat créé par gilly3: https://github.com/gilly3/lowFloat

1
user6050419

Suite à la solution affichée, j’ai utilisé un rapide piratage JQuery pour ajuster de manière dynamique la hauteur du poussoir, en prenant la hauteur de la zone que je voulais aligner en bas à droite, et en éloignant en l'appliquant à la div du pousseur, comme suit: 

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

Il nécessite quelques légères modifications, mais fonctionne généralement aussi bien que vous allez obtenir!

0
Spikeh