comment définir l'enfant deux div à 50%, 50% avec la div parent

J'ai suivantes genre de modèle. Comment appliquer un css changements pour le premier et le deuxième childDiv classe à 50% de la div parent

Comment puis-je régler 50%, de 50% pour l'enfant div?

<div class="parentDiv">
    <div class="childDiv">   //50% width
   </div>
   <div class="childDiv">   //50% width
   </div>
</div>
  • Cela pourrait être juste moi, mais j'ai du mal à comprendre votre question..
  • Tout comme Christoph montre. Un percentual valeur dans le CSS est toujours par rapport à la div parent. Assurez-vous que vous avez défini parentDiv's largeur de bien.
  • Par défaut, cependant, un div est affiché en tant que bloc, il peut prendre jusqu'à 100% de la largeur de son parent (qui, si ce parent est body, la largeur sera de 100% de la fenêtre d'affichage).
InformationsquelleAutor ashokcc | 2012-07-03
  1. 12
    .childDiv{
   display:inline-block;
   width:50%;
}

    Exemple

    Notes importantes:

    1. ne pas laisser d'espaces entre les divs
    2. Vous pourriez tout aussi bien utiliser des flotteurs au lieu de display:inline-block;
    3. Si les éléments ne sont pas alignées dans l'exemple, le navigateur ne prend pas en charge box-sizing, omettez simplement la frontière, puis (c'était à des fins d'illustration seulement).
    • je veux mettre 2 enfant div à 50%, de 50%. je veux dire que chaque enfant div devrait prendre 50% de la Div parent à l'aide de css
    • oui, c'est exactement ce que fait le code. Voir mon edit.
    InformationsquelleAutor Christoph
  2. 4

    Il y a un peu d'un truc ici, dont vous devez être au courant. Si vous mettez tout l'espace entre la clôture de la première div et l'ouverture de la seconde, 50% ne fonctionne pas à cause de l'espace qui est affiché dans le navigateur.

    Il ya un couple de façons de le faire. Si vous êtes cibler uniquement les navigateurs modernes (IE9+, FF, Chrome, Safari), vous pouvez utiliser inline-block:

    <style>
    .childDiv {
        display: inline-block;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   //50% width
    </div><div class="childDiv">   //50% width
    </div>
</div>

    Cependant, IE7 ne prend pas en charge inline-block, de sorte que vous pouvez aller à la "vieille école" de la méthode, à l'aide de flotteurs:

    <style>
    .childDiv {
        float: left;
        width: 50%;
    }
</style>

<div class="parentDiv">
    <div class="childDiv">   //50% width
    </div><div class="childDiv">   //50% width
    </div>
    <div style="clear: both"></div>
</div>

    Si vous voulez vous assurer que les deux colonnes sont exactement de la même largeur et ont toujours un petit espace entre eux, d'utiliser différents styles de chars. Remarque: cette méthode ne nécessite pas que vous éliminez les espaces dans votre balisage entre les divs, plus long que la largeur est inférieure à 50%:

    <style>
    .childDiv {
        width: 49.5%;
    }
    .left { float: left; }
    .right{ float: right; }
</style>

<div class="parentDiv">
    <div class="childDiv left">   //49.5% width
    </div>
    <div class="childDiv right">   //49.5% width
    </div>
    <div style="clear: both"></div>
</div>
    InformationsquelleAutor saluce
  3. -1

    set parent largeur à quelque chose d'abord.

    .parentDiv
{
width: //insert width of the parentDIV
}

    Et puis, ensuite, définir le childDiv largeur.

    InformationsquelleAutor Oedum