J'essaie d'obtenir ce résultat dans un conteneur div sur une page Web vide. Jusqu'ici je me suis retrouvé avec ceci: 
Ce qui est loin de ce que je vise à obtenir. Je ne comprends pas très bien comment les éléments (ou les conteneurs que je suppose dans cet exemple) sont placés sur la page, ou comment je pourrais les afficher comme je le souhaite. Bien sûr, je pourrais utiliser des positions et des dimensions absolues, mais j'ai besoin d'être 'flexible' pour différentes résolutions, et j'ai besoin de faire des animations avec jQuery plus tard en impliquant des changements de position et de taille pour chaque tuile. Voici la structure de la page à ce jour:Affichage des vignettes dans le bon ordre en utilisant HTML et CSS
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper" id="body-wrapper">
<div id="menu-wrapper">
<div id="menu-area">
<a href="#mat1">
<span class="me medium_box" id="mat1">
</span>
</a>
<a href="#mat2">
<span class="me large_rectangle" id="mat2">
</span>
</a>
<a href="#mat3">
<span class="me medium_rectangle" id="mat3">
</span>
</a>
<a href="#mat4">
<span class="me small_box" id="mat4">
</span>
</a>
<a href="#mat5">
<span class="me large_rectangle" id="mat5">
</span>
</a>
<a href="#mat6">
<span class="me vertical_medium_rectangle" id="mat6">
</span>
</a>
</div>
</div>
</div>
</body>
</html>
Et voici la feuille de style (style.css):
.wrapper {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #41B1E1;
overflow: hidden;
}
#menu-wrapper {
width: 1000px;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.me {
color: white;
}
.small_box {
display: inline-block;
width: 125px;
height: 125px;
background-color: white;
}
.medium_box {
display: inline-block;
width: 250px;
height: 250px;
background-color: white;
}
.large_rectangle {
display: inline-block;
width: 375px;
height: 125px;
background-color: aquamarine;
}
.medium_rectangle {
display: inline-block;
width: 250px;
height: 125px;
background-color: mediumaquamarine;
}
.vertical_medium_rectangle {
display: inline-block;
width: 125px;
height: 250px;
background-color: white;
}
#menu-area {
width: 100%;
height: 450px;
border: 1px solid azure;
margin-top: 10%;
}
a {
text-decoration: none;
}
#mat1 {
float: left;
margin-right: 6px;
}
#mat2 {
float: left;
}
#mat3 {
}
1. Pourquoi utilisez-vous pas un plug-in pour cela? 2. Doit utiliser flexbox au lieu de boîtes en ligne et flotter. Il est impossible de réaliser la façon dont vous essayez de le faire. Lisez à propos de flexbox en CSS. – Senthe
Eh bien, je ne sais pas de quel plugin vous parlez ou ce que vous vouliez dire, je ne sais pas non plus ce que sont les flexbox. Je n'ai pas beaucoup d'expérience dans ce domaine, je suis encore à peu près un débutant:/ edit: va vérifier les flexboxes, merci. – Khryus
Il suffit de google "jquery plugin tiles" et vous serez probablement en mesure d'en trouver un. Je sais avec certitude que le matériau angulaire a un composant de tuiles qui devrait fonctionner de manière similaire à ce que vous essayez d'obtenir, mais c'est une dépendance trop grande à inclure uniquement pour ce menu. – Senthe