Mise en page des carreaux avec CSS et HTML
sans compter sur les tables, quelle serait une bonne solution pour accomplir une disposition de tuile telle que celle-ci:layout" src="/images/content/11390759/b0e3954d813f1b5dfbcde3b427cd8590.png"> qui s'adapte automatiquement à la taille de l'écran de l'utilisateur. C'est-à-dire que tout l'écran doit être rempli par les carreaux, quelle que soit la résolution et la hauteur.
j'apprécie les idées.
~ Robert
4 réponses
Voici un exemple de travail: jsfiddle
Html:
<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>
CSS:
html, body, .container
{
height: 100%;
min-height: 100%;
}
.first {
float: left;
width: 20%;
height: 30%;
background-color: red;
}
.second{
float: left;
width: 20%;
height: 70%;
background-color: green;
}
.third{
float: right;
width: 80%;
height: 80%;
background-color: blue;
}
.fourth {
float: right;
width: 40%;
height: 20%;
background-color: #DDDDDD;
}
.last{
float: right;
width: 40%;
height: 20%;
background-color: yellow;
}
je voudrais aller avec quelques-uns div en utilisant le positionnement absolu. Et spécifiez pour chaque tuile la largeur / hauteur / haut / gauche en utilisant % unité.
Indice:
- utilisez un "content div" avec 100% de largeur et de hauteur
- utilisez dans le "content div" deux divs: un pour la colonne de gauche et un pour la colonne de droite. Rappelez-vous de donner à ces "%" dimension (à "contenu" div aussi)
- Rappelez-vous que une flottait droit div venir avant a gauche flottait div
Avec ces trois points, vous devriez être en mesure d'essayer par vous-même.
Avertissement
cela ne signifiera pas les besoins de votre projet. Cela a déjà été répondu par d'autres utilisations.
pour référence future, je me pencherais sur une approche oocss des classes de mise en page. Vous pouvez avoir des pages qui ont une quantité différente de tuiles,etc. J'utilise ce qui suit pour mes projets.
Carreaux De L'Objet
utilisé pour créer des tuiles disposition.
css
.tiles
{
display: block;
}
.tiles__item
{
display: block;
height: auto;
float:left;
}
.tiles--2
{
margin-left: -4%;
}
.tiles--3
{
margin-left: -2%;
}
.tiles--4
{
margin-left: -2%;
}
.tiles--2 .tiles__item
{
margin-left: 4%;
width: 46%;
}
.tiles--3 .tiles__item
{
margin-left: 2%;
width: 31.3%;
}
.tiles--4 .tiles__item
{
margin-left: 2%;
width: 23%;
}
html
<div class="tiles tiles--2">
<div class="tiles__item">
</div>
<div class="tiles__item">
</div>
</div>
Quai De L'Objet
les Quais de contenu vers le bord de l'écran.
css
.dock
{
position: absolute;
height: auto;
width: auto;
}
.dock--t
{
width: 100%;
top: 0;
}
.dock--b
{
width: 100%;
bottom: 0;
}
.dock--l
{
height: 100%;
left: 0;
}
.dock--r
{
height: 100%;
right: 0;
}
html
<div class="dock dock--t">
The content will be docked to the top of the screen.
</div?
Autres
je regarderais l'objet Tiles dans le cadre de Metro UI. Ils permettent des hauteurs
si vous recherchez un bon système de mise en page qui utilise les proportions: