web-dev-qa-db-fra.com

Disposition des tuiles avec CSS et HTML

Sans compter sur les tables, quelle serait la bonne solution pour réaliser une disposition de tuiles comme celle-ci: tile layout 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, quels que soient le avec et la hauteur de la résolution.

J'apprécie toutes les idées.

~ Robert

htmlcsslayout
17
orschiro

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;
}

Le plus grand centre commercial

14
Marian Ban

Je choisirais div en utilisant positionnement absolu . Et spécifiez pour chaque mosaïque la largeur/hauteur/haut/gauche en utilisant % unité.

2
Py.

Allusion:

  • Utilisez une "content div" avec 100% de largeur et de hauteur
  • Utilisez dans le "contenu div" deux divs: un pour la colonne de gauche et un pour la colonne de droite. N'oubliez pas de donner ces dimensions "%" (à "content" div également)
  • Rappelez-vous qu'un div droit flottant doit venirAVANTun div flotté

Avec ces trois points, vous devriez pouvoir vous essayer.

1
DonCallisto

Avertissement

Cela ne veut pas dire les besoins de votre projet. Cela a déjà été répondu par d'autres utilisations.

Pour référence future, je voudrais examiner une approche oocss aux classes de mise en page. Vous pouvez avoir des pages qui ont un nombre différent de tuiles, etc. J'utilise ce qui suit pour mes projets.

Objet Tuiles

Utilisé pour créer des dispositions de tuiles.

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>

Objet de quai

Ancre le contenu au 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 de tuiles dans le cadre d'interface utilisateur de métro. Ils permettent des hauteurs

http://metroui.org.ua/

Si vous recherchez un bon système de présentation utilisant des proportions:

https://github.com/stubbornella/oocss/wiki/Grids

0
Eric Harms