0
Responsive Div avec MicroTiles organisées avec Flexbox
#theTeamWrapper {
\t position: relative;
\t width: 100%;
\t height: auto;
\t background-image: url('https://www.kuboland.com/integra/images/bgTexture-01.png');
\t background-size:cover;
\t text-align: center;
\t display: block;
\t padding-top: 140px;
\t padding-bottom: 20px;
}
#megaWrapper {
width:90%;
height:auto;
background-color: ;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
position: relative;
margin: 0 auto;
}
#tile {
width:180px;
height:180px;
margin: 20px;
color: #fff;
font-family: 'Montserrat';
position:relative;
}
#tileHover {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width:100%;
height: 100%;
opacity:0;
transition: opacity 0.2s ease;
cursor: pointer;
}
#tileHover:hover {
opacity:1;
}
.tileText {
font-size:18px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin: 0 auto;
width:90%;
}
.tileSubText {
font-size:12px;
opacity: 0.8;
}
#tileType {
width:180px;
height:180px;
background-color: #fdd108;
margin: 20px;
color: #fff;
font-family: 'Montserrat';
position:relative;
}
.tileType {
\t position: absolute;
\t left:0;
\t top:0;
\t margin-top: -12px;
\t font-size:40px;
}
.tileType2 {
\t font-family: 'Open Sans', sans-serif;
\t position: absolute;
\t right: 0;
\t bottom: 0;
\t margin-bottom: -8px;
\t font-size: 25px;
\t color:#fff;
}
.founder1 {
\t background-image: url('');
\t background-size: cover;
background-color: green;
}
.founder2 {
\t background-image: url('');
\t background-size: cover;
background-color: green;
}
.founder3 {
\t background-image: url('');
\t background-size: cover;
background-color: green;
}
.employee1 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee2 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee3 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee4 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee5 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee6 {
\t background-image: url('');
\t background-size: cover;
background-color: blue;
}
.employee7 {
\t background-image: url('');
\t background-size: cover;
background-color: pink;
}
.employee8 {
\t background-image: url('');
\t background-size: cover;
background-color: pink;
}
.employee9 {
\t background-image: url('');
\t background-size: cover;
background-color: pink;
}<div id="theTeamWrapper">
\t \t \t
\t \t \t <div id="megaWrapper">
\t \t \t \t <div id="tileType">
\t \t \t \t \t <h3 class="tileType">
\t \t \t \t \t TEAM
\t \t \t </h3>
\t \t \t \t \t <h3 class="tileType2">
\t \t \t \t \t A
\t \t \t </h3>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="founder1">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="founder2">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t <div id="tile" class="founder3">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="megaWrapper">
\t \t \t \t <div id="tileType">
\t \t \t \t \t <h3 class="tileType">
\t \t \t \t \t TEAM
\t \t \t </h3>
\t \t \t \t \t <h3 class="tileType2">
\t \t \t \t \t B
\t \t \t </h3>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee1">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee2">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t <div id="tile" class="employee3">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee4">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee5">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee6">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="megaWrapper">
\t \t \t \t <div id="tileType">
\t \t \t \t \t <h3 class="tileType">
\t \t \t \t \t TEAM
\t \t \t </h3>
\t \t \t \t \t <h3 class="tileType2">
\t \t \t \t \t C
\t \t \t </h3>
\t \t \t </div>
\t \t \t <div id="tile" class="employee7">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee8">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t \t <div id="tile" class="employee9">
\t \t \t \t <div id="tileHover">
\t \t \t \t \t <h3 class="tileText">
\t \t \t \t \t NAME
\t \t \t \t \t <br>
\t \t \t \t \t <span class="tileSubText">Title</span>
\t \t \t </h3>
\t \t \t </div>
\t \t \t </div>
</div>
</div>j'ai une division qui contient beaucoup de tuiles, avec des noms et des titres chacun, ainsi que quelques tuiles descriptives telles que « team1 » « team2 » et "Team3"
Chaque tuile est 180x180px, je suis en train d'y parvenir avec cette enveloppe sensible
Il y a 3 groupes de tuiles en couleurs, le jaune décrit ce groupe comme A, B ou C. et une fois qu'une tuile descend à une autre rangée parce qu'il n'y a plus d'espace je veux qu'elle freine cette ligne et que le groupe suivant commence sous celui-ci.
Mon code comme https://jsfiddle.net/yw81cxzc/1/
Je ne sais pas ce que je fais mal, un conseil?
Wow merci beaucoup @wpalmes, fonctionne très bien, en quelque sorte pour les aligner au milieu? en ce moment, ils sont dans le coin gauche de l'emballage principal? avec l'espace autour ne devrait pas fonctionner? – Eugenio
J'ai fait quelques recherches, et cela semble un peu compliqué. Il y avait beaucoup de solutions de rechange pour ainsi dire. Je suppose qu'un moyen facile serait d'utiliser l'espace autour ou l'espace entre (celui qui s'adapte correctement), définir une largeur maximale sur # mega-wrapper pour garder la ligne à 4 éléments, puis utiliser des requêtes média à chaque point de rupture pour réduire le montant de la rangée. Pas la meilleure solution, mais cela peut fonctionner. Vous auriez toujours la rangée du bas centrée qui serait un autre problème en soi. – wpalmes