3 Réactive DIV Boîtes côte à Côte - de ne Pas Rester Ensemble

Salut, j'ai besoin d'aide pour comprendre cela. J'ai 3 divs qui ont besoin de rester côte à côte, peu importe comment grand ou petit l'écran, mais le problème est que, une fois la largeur de l'écran atteint dessous 400px, la dernière div passe sous les autres. Comment puis-je les faire rester en ligne et en même temps sensible et centré sans devenir complètement fou avec les media queries? S'il vous plaît aider. VOICI UN VIOLON

CSS:

.box{
    background-color: coral;
    width: 30%;    
    float:left;
    margin:10px;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

HTML:

<div class="box">
    <div class="text">Text</div>
</div>
<div class="box">
    <div class="text">Text</div>
</div>
<div class="box">
    <div class="text">Text</div>
</div>
InformationsquelleAutor CodeGodie | 2014-05-13
  1. 4

    Un moyen de résoudre ce problème serait pour envelopper les divs dans un récipient, et lui donner un conteneur white-space:nowrap;text-align:center règle. Puis changer les divs de flotter à display:inline-block;.

    jsFiddle exemple

    .box {
    background-color: coral;
    width: 30%;
    display:inline-block;
    margin:10px 0;
    border-radius:5px;
}
.text {
    padding: 10px 0;
    color:white;
    font-weight:bold;
    text-align:center;
}
#container {
    white-space:nowrap;
    text-align:center;
}
    • par la mise en œuvre de cette, je vois encore un problème, tout se passe à droite. Il doit être considéré
    • Va vers la droite?
    • sens, lorsque la largeur de l'écran est petit, toutes les boîtes doivent toujours être consulté. Avec votre code, la dernière case ,sur la droite, n'est plus en mesure d'être vu.
    • Donc plus comme ceci jsfiddle.net/j08691/32hcm/6?
    • les travaux de cette. Veuillez mettre à jour votre réponse à montrer le code, et je vais vous donner le chèque. merci
    • Une chose est sûre, c'est fait.

    InformationsquelleAutor j08691
  2. 1

    Pour une sécurité réactive mise en page, le travail avec display:table sur un wrapper div, et de changer la boîte de display:table-cell. Pour le remplissage, ajouter un moyen div, et de définir la largeur en percentual valeur. En outre, vous ne avez même pas besoin de définir la largeur de la zone de.

    http://jsfiddle.net/32hcm/9/


    HTML:

    <div class="wrapper">
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="middle"></div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="middle"></div>
    <div class="box">
        <div class="text">Text</div>
    </div>
</div>

    CSS:

    .box{
    background-color: coral;
    display: table-cell;
    border-radius:5px;
}
.text{
    color:white;
    font-weight:bold;
    text-align:center;
    padding: 10px 0;
}

.wrapper {
    display: table;
    width: 100%;
}

.middle {
    display: table-cell;
    width: 10%;
}
    • Je vous remercie. Cela fonctionne ainsi.
    InformationsquelleAutor LcSalazar
  3. 0

    Le problème est avec votre marge fixe de 10px. La changer pour cent de la valeur, et d'ajuster la largeur percentual aussi, et il fonctionne parfaitement.

    .box{
    background-color: coral;
    width: 28%;    
    float:left;
    margin:1%;
    border-radius:5px;
}
.text{
    padding: 10px 0;
    color:white;
    font-weight:bold;
    text-align:center;
}

    http://jsfiddle.net/32hcm/5/

    • cela fonctionne, mais il n'est toujours pas centré. Ils ont tous besoin d'être centré
    • Enlever le rembourrage. J'ai mis à jour la réponse.... padding: 10px 0;
    • Désolé... Tu as fait de le mentionner...
    • pas de problème.. cependant, les boîtes sont toujours pas centré. J'ai besoin de tous pour être centré dans le milieu de l'écran. Dois-je emballer tous à l'intérieur d'une div?
    • Oui, mais je voudrais changer l'approche alors... toujours préférable de travailler avec display:table. J'ai ajouté une autre réponse...
    • J'ai eu la réponse. Merci

    InformationsquelleAutor LcSalazar
  4. 0

    Utilisation table-cell

    et un conteneur pour être à 100%:

    .core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 32.03125%; 
    float:none;
    display: table-cell;
    border-radius:5px;
}

    VIOLON

    • J'ai eu la réponse. Merci
    InformationsquelleAutor Riskbreaker