CSS, Responsive, en virgule flottante, les boîtes s'empilent

Je veux créer un réactif de mise en page où il y a deux colonnes, à gauche et à droite.
Sur les petits écrans les cases sur la gauche pour se déplacer dans certaines positions. Cela fonctionne très bien avec mon code, mais le problème est que sur les grands écrans, il existe un fossé sur le côté droit entre les cases.

Comment puis-je le résoudre?

L'idée et le problème

CSS, Responsive, en virgule flottante, les boîtes s'empilent

JSFIDDLE

Lorsque vous regardez les suivantes jsfiddle, vous voyez qu'il travaille pour le petit écran, mais les problèmes ne pas se déplacer sur grand écran. Je sais que la façon dont je le fais, c'est mal, mais comment puis-je obtenir le résultat souhaité avec CSS?

http://jsfiddle.net/7rnum9xk/

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }    
}
essayez de regarder dans .clearfix
faire les éléments colorés ont des hauteurs fixes?
Non, chaque élément a une dynamique de la hauteur. Les grandes et les petites boîtes.

OriginalL'auteur NLAnaconda | 2014-09-11

  1. 12

    essayer ce code DÉMO

    .main{
    width:65%;
    height:125px;
    margin-bottom:10px;
   float:left; 
    display: inline-block;
}
.small{
    width:35%;
    height:25px;
    /* float:left; */
    display:inline-block;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }

}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}
    Wahoo! À première vue, vous semblez être le héros du jour!
    c'est gentil, +1 juste faire shure les éléments colorés sont toujours plus petits que les gris : jsfiddle.net/webtiki/7rnum9xk/11

    OriginalL'auteur Alex Wilson

  2. -1

    Le problème, c'est la structure de l'html, vous avez mis la div principale après tous les petits divs. Donc sa va imprimer cette div en premier.

    Ce que je vous suggère de faire est de modifier la structure html comme ceci;

    flotteur de la colonne de gauche de gauche et la colonne de droite de droite.

    Puis les placer autour d'un div autour de

    ajouter des médias css de sorte que, à 800px (ou ce que vous avez besoin), vous pouvez display none; sur .hide800 ce masque la div, puis ajouter une div autour de votre html, mais mettre une ligne de style de l'affichage aucun. Puis à 800px (ou de n'importe quelle taille que vous cachez la première div) ajouter la feuille css pour display: block !Important;

    Cette façon de travailler la façon dont vous en avez besoin pour la totalité de la largeur des navigateurs, mais ensuite, lorsque l'écran est assez petit pour changer la structure, vous pouvez utiliser votre code actuel.

    html;

    <div class="hide800">
    <div class="left-col">
    <div class="main">
    </div>
    <div class="main">
    </div>
    <div class="main">
    </div>
    </div>
    <div class-right-col">
    <div class="small orange">
    </div>
    <div class="small green">
    </div>
    <div class="small blue">
    </div>
    <div class="small purple">
    </div>
    <div class="small red">
    </div>
    </div>
</div>
<div class="show800" style="display:none;">
<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>
</div>

    css;

    .left-col {
float: left;
}
.right-col {
float: right;
}
@media screen and(max-width:800px){
.hide800 {
display: none;
}
.show800 {
display: block !Important;
}
}

    Si vous avez besoin de moi pour de plus amples explications laissez-moi savoir 🙂

    Mais cela signifie que je dois générer chaque petit élément deux fois? Une fois dans le show800 et une fois pour le hide800 éléments? (corrigez-moi si je me trompe), j'espérais trouver une solution qui ne marche pas besoin de générer un double contenu.
    Je pense que la duplication de contenu n'est pas bon non plus. Je suis dans une situation similaire. Quid des bibliothèques comme des isotopes?
    Ok pas de problème, Désolé, je ne pouvais pas aider plus.
    Merci quand même Jay!

    OriginalL'auteur Jay