Mise en page avec les divisions au lieu de table

Flottait colonnes

Il n'y a pas besoin d'un tableau HTML dans ce cas.

Les tableaux HTML sont appropriés pour les grilles de données, mais pour la mise en page générale (mise en place de colonnes et autres) les flotteurs sont presque toujours la meilleure option (comme @GrantMynott suggéré). Bien que les cartes sur cette page s'affichent dans une grille, il n'est pas vraiment une grille de données.

Si vous ajoutez un clearfix à votre fichier CSS, vous pouvez simplifier grandement l'utilisation de chars (création de colonnes). Chaque fois que vous avez un conteneur avec flottaient des colonnes, vous pouvez ajouter le clearfix classe pour le conteneur. Ensuite, vous n'avez pas à vous soucier des détails de la compensation de la flottait colonnes.

Voici un exemple, à l'aide d'une version traditionnelle de clearfix (ce qui est une bonne version pour commencer):

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

Cet exemple utilise des noms génériques pour les classes CSS ("colonnes", "colonne1", colonne2"). Les noms qui sont plus significatifs pour la page en question peut être utilisé comme nécessaire.

Mise à jour

Après avoir regardé votre démo révisée:

• Il y avait une faute de frappe avec le nom de la classe "co12" qui empêche que la colonne de flottaison. J'ai mis à jour le nom de "colonne2", pour faire ce genre de faute de frappe moins probable.
• C'est une bonne idée d'ajouter une clearfix pour les cartes de conteneur (puisque les cartes sont flotté), juste pour être sûr. À l'heure actuelle, les cartes conteneur est la colonne de gauche lui-même, de sorte qu'il serait ajouté.
• Cela peut être une préférence personnelle, mais je l'ai trouvé à être légèrement plus sûr de flotteur de toutes les colonnes dans la même direction (généralement à gauche), que d'avoir un mélange de certaines flottaient à gauche et à certaines flottaient à droite. Les instructions de mélange, dans le même conteneur n'est pas aussi stable, dans certains cas, (ou au moins, sur les anciens navigateurs), mais dans la plupart des cas, il est sécuritaire de le faire.

Mise à jour de la démo

À ce stade, vous avez juste besoin d'ajouter des hauteurs ou des parois verticales (ou remplissage) pour le contenu dans la colonne de droite. J'ai ajouté un conteneur div autour de l'image du logo, pour rendre cela un peu plus facile. Il pourrait éventuellement être un conteneur div autour du bouton de trop, bien que vous pourriez probablement gérer sans un.

OriginalL'auteur Matt Coughlin

Je pense que vous êtes à la recherche pour le CSS float propriétés.

Vous avez besoin de laisser flotter votre jeu carrés à gauche et un autre contenant pour les stats/logo, etc sur la droite:

.game-container { float: left; width: 430; }
.stats-container { float: right; width: 161; }
.logo { height: 95; width: 100%; }
.scoreboard { height: 148; width: 100%; }
.restart { height: 148; width: 100%; }
#msg { clear: both; } /* Append to pre-existing identifier to display below immediate left and right floated content */

Puis placez votre contenu en eux, comme si, comme le div est un élément de type block ceux dans les stats conteneur écran verticalement:

<div class="game-container">
    <div class="container">
        <div id="a1" class="card"></div>
        ...
    </div>
</div>
<div class="stats-container">
    <div class="logo">LOGO</div>
    <div class="scoreboard"></div>
    <div class="restart"><input id="clicky" type="button" value="Restart"/></div>
</div>
<div id="msg"></div>

OriginalL'auteur Grant Mynott