arrêter div redimensionnement div parent à l'aide de css

http://jsfiddle.net/ETkkR/

<div id="Blog1">
    <div class="post">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
        <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>
    <div class="post">
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
                <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>        
</div>​

De la div.post-info dans certains cas(les images de largeur supérieure à la div.post-info contenu) correspond à la div.post parent cependant, parfois, la largeur de la div.post-info est plus d'avoir une incidence sur le div parent.post par le redimensionnement. comment puis-je faire de la div.post-info s'adapter à la largeur de la div.parent et non pas de la redimensionner si elle est plus grande.

mon css

#Blog1{
    padding:10px;
}
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.post img{
    height:100px;
}
.post .post-info{
    text-align:left;
}
.post .post-info span{
    word-wrap:break-word;
}​

Modifier

VOUS POUVEZ MODIFIER LES ÉLÉMENTS, TANT QUE LE CONTENU RESTE LE MÊME POUR CRÉER UNE SOLUTION
les gens continuer à donner des solutions qui ne sont pas adaptés à ce que je me demande...ce que j'ai besoin est pour l'enfant div .post-info pour ne pas être une plus grande largeur que celle de la .post div parent

Juste une question: vous ne voulez pas d'augmenter la hauteur, mais de parvenir à quelque chose comme l'élément a overflow:hidden; droit? Vous devez nous dire ce que vous voulez atteindre et ne voulez pas.

OriginalL'auteur Yusaf Khaliq | 2012-05-21

  1. 9

    Voici une démo, mais vous devriez vraiment l'expliquer: voulez-vous la hauteur variable ?

    jsFiddle démo

    édité CSS (seuls les éléments modifiés):

    #Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display:block;         /**/
    float:left;            /**/
    overflow:hidden;       /**/
    padding-bottom:24px;   /**/
}
.post .post-info span{
    position:absolute;     /**/
    word-wrap:break-word;
}

    P. S: cette question m'associe, moi à une vieille réponse de la mienne 🙂

    Pop les Images comme des Images de Google

    Si vous avez besoin d'aide ... je suis ici

    Je sais que je l'ai découvert il y a deux jours c'est génial j'ai personnellement fait quelques modifications pour le plugin, SON GOOOD, mais j'ai besoin d'une solution de repli pour les utilisateurs avec javascript désactivé.
    🙂 merci! J'ai été tellement surpris de voir votre violon! 🙂 Ok, maintenant, dites-moi ce que vous pensez de ma démo et ma réponse --- et ma question - parce que je crains que si vous essayez de développer la hauteur du conteneur, que le résultat pourrait être un peu brouillon (car elle repose sur la description length).
    J'ai trouvé une solution alternative et une fois im fait avec le style je vais le partager avec vous
    heres l'edit que j'ai fait pour vous cependant jsfiddle.net/HmTrw/189
    votre réponse est ce que l'on m'a aidé à trouver une solution, mais si j'ai accepté 😉

    OriginalL'auteur Roko C. Buljan

  2. 1

    Il semble fonctionner avec la modification suivante à votre fichier CSS:

    .post .post-info span{
    display: block;
    max-width: 90%;
    margin: 0 auto;
}​

    JS Fiddle démo.

    Raisonnement:

    • display: block; permet une width (et donc max-width) qui sera affecté à l'élément.
    • max-width: 90%; pour s'assurer que l'élément de la largeur maximale est inférieure à la largeur du parent, permettant de l'espace entre le contenu de l'élément et les frontières de la mère.
    • margin: 0 auto; horizontalement centres de l'élément au sein de son parent.
    Beaucoup d'espaces blancs entre les images peut être. Pas bonne. Ils doivent tous être partout taille unique

    OriginalL'auteur David Thomas

  3. 0
    #Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    max-width: 200px;
    overflow-x: hidden;
}

    Cette solution ne va pas cependant de travail dans IE6, je pense.

    OriginalL'auteur Rob Lowe

  4. 0

    Essayer de la propriété css max-width

    Je sais, mais si j'ai mis un max-width de la propriété, le texte ne va pas être de la même largeur que le contenu dans le div parent si elle est plus grande

    OriginalL'auteur Steve Binder

  5. 0

    Vous pouvez définir la div .post largeur à 100%, et .post-info largeur à 100%:

    #Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

    Je crois que ça va faire de la div .post-info par rapport à son parent div.

    OriginalL'auteur soberga

  6. 0

    J'ai eu le même problème que l'OP et la solution pour moi a été de définir

    box-sizing: border-box;

    Je n'arrivais pas à reproduire le comportement dans un violon, mais juste de l'ajout de la ci-dessus à l'intérieur de l'élément résolu dans mon application, donc j'espère que ça aide quelqu'un.

    OriginalL'auteur user2728841