CSS: envelopper le texte autour d'un div en bas à droite?

Question

Chaque fois que j'essaie de faire quelque chose d'apparemment simple en CSS, il me frappe dans l'intestin et vole mon argent pour le dîner :(

J'ai été regarder cela pendant plus d'une heure et n'ai pas fait un peu de progrès...

J'ai un div du contenu qui contient un 460x160 image. Tout ce que je veux faire, c'est la position de l'image dans le coin inférieur droit et envelopper mon texte autour d'elle.

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

Donc, je veux qu'il ressemble:

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

De le faire avec un haut à gauche ou en haut à droite de l'image est du gâteau:

#contents img { float:right; }

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

Maintenant, comment puis-je pousser vers le bas? Le meilleur que j'ai trouvé pour l'instant:

#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, donc il y a un espace 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.

Donc... comment puis-je accomplir?

Answer 1

Il semble avoir été posée avant (2003), et avant (2002), ou avant (2005)

Le dernier lien suggèrent en fait un javascript à base de solution, mais pour un fixe (non liquide) solution.

Il est cohérent, cependant, avec d'autres conseils trouvés

La seule façon de le faire est de mettre le flottait élément quelque part dans le milieu du texte. Il est impossible d'obtenir la perfection de tous les temps.

Ou cette un:

Il se compose de flotter à la verticale "pusher" de l'élément (comme img, mais c'est probablement plus intelligent d'utiliser une div vide), puis flottant à l'objet désiré, à l'aide de la propriété clear. Le problème majeur de cette méthode est que vous devez toujours savoir combien de lignes de texte. Cela rend les choses BEAUCOUP plus facile si, et pourrait certainement être codées avec javascript, il faut juste modifier la hauteur de la "pusher" à la hauteur du contenant moins la hauteur du flotteur (en supposant que votre conteneur n'est pas fixe/min hauteur).

De toute façon, comme discuté dans ce fil, il n'y a pas de solution facile...

---

Cletus mentionne dans les commentaires de ce fil à partir de 2003, qui indique une fois de plus, le fait qu'il ne peut pas être facilement atteint.
Cependant, il fait référence à ce Eric Meyer l'article, qui se rapproche de l'effet que vous souhaitez obtenir.

Par la compréhension de la façon dont les flotteurs et le flux normal se rapportent les uns aux autres, et de comprendre comment la compensation peut être utilisée pour manipuler le flux normal autour de flotteurs, les auteurs peuvent utiliser flotte comme un très puissant outil de mise en page.
Parce que les chars n'étaient pas initialement destinés à être utilisés pour la présentation, certains hacks peut être nécessaire de les faire se comporter comme prévu. Cela peut impliquer des éléments flottants qui contiennent des flotteurs, une "compensation" des éléments, ou une combinaison des deux.

Answer 2

Eh bien ... c’est un très vieux billet, mais j’ai eu du mal à l’atteindre avec un petit 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, 170px de hauteur 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é :)

Answer 3

En complément de la solution proposée, j’ai utilisé un rapide piratage JQuery pour ajuster de façon dynamique la hauteur du poussoir, en prenant la hauteur de la zone que je voulais aligner en bas à droite de celle du contenu et en l’appliquant à le poussoir div, 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!

Answer 4

La solution que j'ai trouvée implique que vous ayez un div dont la largeur ne change pas, pas plus que la quantité de texte. Ensuite, vous pouvez positionner l'image dans le texte et l'aligner = à droite. Donc, si vous avez une bonne quantité de texte, alors vous obtenez l'image à droite et au bas de la div.

     <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    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 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 ...   
    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 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 ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    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 text text text ...
     hey hey 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 ...
</div>
 

Answer 5

Ok. Donc en fait, j'ai eu ce même problème et à un certain point, la réponse m'a frappé comme la nuit de samedi gâteau au fromage. C'est presque le même succès et l'échec d'effet que vous avez lorsque vous essayez de définir l'habillage de texte dans Word.

img.right {
     float: right;
}

Maintenant, tout ce que vous avez à faire est de simplement le mettre à l'INTÉRIEUR du texte où vous souhaitez les lignes de rupture. Le texte va flotter à la fin du texte, de sorte qu'il sera toujours de pousser le texte vers la gauche, mais si vous placez l'image dans le milieu du texte comme...

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

la partie supérieure reste où il est et le texte est libre de flotter au-dessus de l'image et le reste est poussé vers la gauche de l'image. C'est une solution mais pas aussi fastidieux que l'utilisation de JS et si vous utilisez un éditeur WYSIWYG, il est encore plus facile. Venez pour penser à elle, si vous utilisez un éditeur WYSIWYG, il a cette fonction automatiquement. :P le Problème est résolu.

Des acclamations.