Comment mettre des 3 éléments dans une rangée dans un div parent?

J'ai mis 3 éléments div dans un autre élément div comme ceci:

<div id="mom">
<div class="baby"></div>
<div class="baby"></div>
<div class="baby"></div>
</div>

Lors de redimensionner mon navigateur de sorte que le parent largeur des changements, il se passe quelque chose: "3 élément près ensemble."

Je ne peux pas définir la marge de gauche et de droite auto.

InformationsquelleAutor Mohammad kasiri | 2014-01-29
  1. 2

    Donc, vous voulez un correctif de la marge, mais dynamique de la largeur? Qui prend un peu plus de balisage, sauf si vous êtes prêt à déposer, pour IE9 et ci-dessous en utilisant flexbox.

    La chose est, vous ne pouvez pas diviser de 100% en pourcentages et de fixer des valeurs (dynamique de la largeur, de fixer la marge) juste comme ça. (il y a des façons à l'aide de calc() .. mais si vous allez utiliser calc, vous pouvez également utiliser flexboxes à la place.

    Remarque: Les éléments d'enfant ne sont pas exactement de la même largeur. Il n'y a pas (non-flexbox, non-calc) pour y parvenir.

    Voici un exemple (jsFiddle) avec un peu plus de balisage, mais IE8 et 9.

    HTML:

    <div class="mom">
    <div class="child">
        <div class="childinner">Lorem ipsum dolor.</div>
    </div>
    <div class="child">
        <div class="childinner">Amet laborum cupiditate.</div>
    </div>
    <div class="child">
        <div class="childinner">Ratione maxime et!</div>
    </div>
</div>

    CSS:

    .mom {
    width: 100%; /* Try setting this to 400px or something */
    display: table;
    border: 1px solid #444444;
}
.child {
    display: table-cell;
}
.childinner {
    margin-left: 25px;
    /* Decorative .. */
    background-color: #cccccc;
    min-height: 40px;
}
.child:first-child .childinner {
    margin-left: 0;
}
    InformationsquelleAutor MildlySerious
  2. 3

    Vous devez mentionner display: table; sur votre parent div et display: table-cell; sur votre enfant div. j'ai posté un exemple de code sur jsfiddle..

       #mom
    {
        display: table;
        width: 100%;
    }
    .baby
    {
        display: table-cell;
        color: red;
        background: #333333;
    }

    Violon

    • pourquoi downvoted? il dit qu'il veux 3 divs sur la même ligne
    • Aucune explication? Aussi, maman doit width: 100%. mise à jour de violon
    • je suis en train de mettre à jour mon violon.. donc il faut du temps pour mettre à jour la réponse avec explication
    • les gars, je veux 3 enfants div sur la même ligne, et ils avaient de la marge de gauche et de droite = 20px ensemble
    • réglage de la marge de 20px est tout à fait différent de réglage de la marge de l'auto. vous devez décider.
    • mon ami, je veux que ce 3 éléments enfants avaient margin-right & margin-left avec ensemble pour exemple 20px. votre code est bon mais je n'ai pas toute la distance entre les 3 éléments!!!
    • vous avez droit à mon mec!!! désolé, vous pensez que je veux 20px entre 3 éléments
    • C'est une autre façon. ici, vous allez jsfiddle.net/fwshE/11

    InformationsquelleAutor Karuppiah RK
  3. 1

    Vérifier: http://jsfiddle.net/3F5WQ/4/

    Utiliser uniquement float:left; et l'utilisation percentage pour la largeur.

    #mom{
    width: 100%;        
}

.baby{ 
    text-align: center;
    float: left;
    position: relative;
    width: 26.67%; 
    margin-left: 5% ;
}
    InformationsquelleAutor JunM