L'image va au-delà des limites div divisées

Quelqu'un peut jeter un oeil à la suite de violon: http://jsfiddle.net/R4bCy/1/

J'ai pensé que la div doit l'ajuster en hauteur afin de pouvoir tenir des éléments, sauf si ces éléments sont en position absolue.

Pourquoi le div ne pas s'étendre sur toute la hauteur de l'image?

J'ai besoin de l'image pour être aligné à droite. La seule façon que je sais comment le faire, c'est align='right'position:absolute; right: 0; et float:rightqui font de la div contenant pas ajuster la hauteur à la hauteur de l'image.

source d'informationauteur Jake Wilson

  1. 13
    .intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
​.img{
float:right;
height:auto;
}​

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>​​​​​​​​​​

    DÉMO

  2. 5

    "Pourquoi ne le div ne pas s'étendre sur toute la hauteur de l'image?'

    Parce que les flotteurs se chevauchent avec des blocs, seul bloc de mise en forme des contextes contiennent des flotteurs. (Vous pouvez trouver un assez bon aperçu de l'ensemble du sujet ici: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )

    À résoudre le problème à portée de main:

    La align=right sera, en fait, les img être float: right (le align attribut est obsolète et css devrait être utilisé).

    Pour contenir la flottait l'image de son parent div vous devez soit être le parent div établir un bloc de mise en forme de contexte (bloc de mise en forme des contextes joindre imbriquée flotteurs) ou explicitement le flotteur avec un élément supplémentaire après le img qui est considéré comme un clear: right.

    Une solution simple pour créer un bloc de mise en forme de contexte consiste à faire flotter le parent div ainsi, bien que mon préféré la solution dans ce cas serait tout simplement de définir sa overflow à hidden (ce qui entraîne également un bloc de mise en forme).

    Découvrez la mise à jour du violon http://jsfiddle.net/R4bCy/8/.

  3. 1

    Ce que vous devez faire est d'ajouter, après la balise p,

    <div style="clear:both;"></div>
  4. 0

    Oups, toutes mes excuses, posté et que vous l'avez édité votre question - l'aligner à droite est flottant, il je crois (vous devriez plutôt utiliser float:right et un clearfix de quelque sorte).

    exemple: http://jsfiddle.net/R4bCy/5/

  5. 0

    C'est ce que je crois que vous voulez:
    http://jsfiddle.net/R4bCy/6/

    Si vous voulez que le texte sur la gauche et l'image flottait à la droite, s'il vous plaît ne c'est votre CSS:
    http://jsfiddle.net/R4bCy/15/

    Vous pouvez aussi avoir deux divs qui ont une largeur de 50% contenue dans un récipient div. Cela vous permettra un peu plus de flexibilité dans le placement de l'image, parce que le texte et l'image ont chacun leur propre modifiables divs indépendant attributs