Quelqu'un peut-il me dire comment aligner les tuiles Metro Layout UI CSS

The thing is that I have a pair of tiles of span 4 & span 5 in the first row and in the next one i got a large tile of span 9 ... but everything is misaligned some idea of why it is happening???

J'utilise Chrome 31 avec jQuery 2.xx - Metro UI CSS 2.0

La largeur de la grille est la valeur par défaut de 940px.

<body class="metro">
<div class="wrapper">

<div class="board grid">

<div class="row">
<div class="span4 bg-red tile header">size 4</div>
<div class="span5 bg-red tile header">size 5 </div>
</div>

<div class="row">
<div class="span9  bg-cyan tile weather header ">size 9</div>
</div>


<div class="row">
<div class="span2  bg-pink tile weather header ">size 2</div>
<div class="span6  bg-yellow tile weather header ">size 6</div>
<div class="span1  bg-orange tile weather subheader ">size 1</div>
</div>

</div>
</div>

"Le Wrapper est vide"

Right now it look like this: https://drive.google.com/file/d/0B2KdeNv2dTpxMU1NcF94eVBmeTQ/edit?usp=sharing

1
ajouté édité
Vues: 1
Pouvez-vous poster du code, un violon et/ou ce que vous avez déjà essayé? Sinon c'est comme essayer de trouver un grain de sable spécifique sur une plage :(
ajouté l'auteur SW4, source
Question aveugle sans code ...
ajouté l'auteur fiskolin, source

2 Réponses

Je répare le problème en utilisant un plugin appelé Gridster si vous êtes intéressé par le lien: Plugin pour concevoir la mise en page de style Metro UI vous faites glisser les blocs autour de l'écran jusqu'à ce que vous obteniez la position désirée. Même vous pouvez décider si laisser les blocs glisser ou non pour les utilisateurs.

0
ajouté

vous devez ajouter un span à 12 grille dans chaque rangée ..

0
ajouté
ajouté l'auteur Yamel Mauge, source
Cette boîte a été alignée avec la boîte avant elle mais les autres ne leur ont même pas donné un décalage pour correspondre aux 12 colonnes
ajouté l'auteur Yamel Mauge, source
essayez d'ajouter un décalage chaque fois votre classe span. <div class = "span4 offset8 bg-rouge tuile en-tête"> taille 4 </div>
ajouté l'auteur Ahmad Ramli, source
okk, vous devez utiliser une ligne dans chaque colonne que vous avez créé, de sorte que l'affichage en fonction de votre objectif ..
ajouté l'auteur Ahmad Ramli, source