Comment puis-je obtenir un div de flotter au fond de son contenant?

Question

J'ai flotté images et l'encart cases au dessus d'un récipient à l'aide du flotteur:droite (ou à gauche) de nombreuses fois. Récemment, j'ai frappé un besoin de faire flotter un div dans le coin inférieur droit d'une autre div avec du texte normal wrap que vous obtenez avec flotteur (texte enveloppé ci-dessus et à gauche seulement).

Je pensais que ce doit être relativement facile, même si le flotteur n'a pas de valeur du bas mais je n'ai pas été en mesure de le faire à l'aide d'un certain nombre de techniques et de recherche sur le web n'est pas venu avec rien d'autre que d'utiliser le positionnement absolu, mais cela ne donne pas le bon mot envelopper comportement.

J'avais pensé que ce serait un très commun de la conception, mais apparemment, il ne l'est pas. Si personne n'a une suggestion, je vais casser mon texte dans les boîtes séparées et d'aligner la div à la main, mais c'est plutôt précaire et je déteste avoir à le faire sur chaque page qui en a besoin.

Answer 1

Définir le div parent d' position: relative, puis l'intérieur de la div...

position: absolute; 
bottom: 0;

...et là vous allez :)

Answer 2

Un moyen de le faire fonctionner est la suivante:

• Flotteur de vos éléments de gauche comme d'habitude

• Tourner le div parent de 180 degrés à l'aide de

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle: http://jsfiddle.net/wcneY/

• Maintenant, tournez tous les éléments qui flottent à gauche (leur donner une classe) de 180 degrés pour les mettre à nouveau droite. Voila! ils flottent vers le bas.

Answer 3

Après avoir lutté avec les différentes techniques pour un couple de jours, je dois dire que cela semble être impossible. Même à l'aide de javascript (que je n'ai pas envie de faire), il ne semble pas possible.

À préciser pour ceux qui n'ont pas compris - c'est ce que je suis à la recherche d': dans l'édition c'est assez commun à disposition un encart (image, tableau, graphique, etc.) alors que son fond soit aligné avec le bas de la dernière ligne de texte d'un bloc (ou page) avec le texte circulant autour de l'encart de manière naturelle au-dessus et à gauche ou à droite selon le côté de la page de l'encart. En html/css il est trivial d'utiliser le flotteur style de ligne du haut d'un encart avec le haut d'un bloc, mais à ma grande surprise, il semble impossible d'aligner le bas du texte et l'encart malgré qu'il soit une commune de la tâche de mise en page.

Je crois que je vais revoir les objectifs de conception pour cet article, sauf si quelqu'un a une dernière minute de la suggestion.

Answer 4

J'ai obtenu ce dans JQuery en mettant un zéro largeur de la jambe de l'élément au-dessus du flotteur droit, puis le dimensionnement de la jambe de force (ou la conduite) en fonction de parent hauteur de moins flottait la taille de l'enfant.

Avant de js en branle, je suis en utilisant la position absolue de l'approche qui fonctionne, mais permet des flux de texte derrière. Donc je passe en position statique pour permettre à la jambe de l'approche. (en-tête est l'élément parent, la découpe est celui que je veux en bas à droite, et le tuyau est ma jambe)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

Le tuyau doit venir à la 1ère, puis la découpe, puis le texte dans le code HTML de commande.

Answer 5

Mettre le div dans un autre div et définir le parent div style d' position:relative; Alors sur l'enfant div définir les propriétés CSS suivantes: position:absolute; bottom:0;