Espace supplémentaire dans css responsive utilisant float: left;

Question

Pour la vie de moi, je ne peux pas comprendre pourquoi ce code ne peut pas fonctionner. J'essaie de mettre en place un site web personnel et avant que je mette mon contenu en place, je veux que toutes les zones soient configurées et réactives. Je veux une grille de boîtes 3x3 où je peux afficher mon travail (div id = container), mais chaque fois que je présente le neuvième bloc div spécifiquement (p9), l'arrangement se casse pour apparemment pas de raison. Voici le code pour la mise en page de bureau:

body{ 
    background-color:#FFB51E; 
    width:100%; 
    height:1000px; 
    position:absolute; 
} 

/* unvisited link */ 
a:link { 
    text-decoration:none; 
    background-color: #2A56C4; 
    color:#fff; 
    padding:15px; 
    border-radius:26px; 
    } 
/* visited link */ 
a:visited { 
    color: fff; 
    } 
/* mouse over link */ 
a:hover { 
    background-color:#FF581E; 
    } 
/* selected link */ 
a:active { 
    color:#FF581E; 
    background-color:fff; 
    } 

#header{ 
    width:80%; 
    height:160px; 
    margin: 0 auto; 
    position:relative; 
    display:block; 

} 

.left{ 
    color:#fff; 
    text-align: left; 
    margin-top:25px; 
    margin-bottom:15px; 
    font-size:36px; 
    position:relative; 
    float:left; 
    width:310px; 
    display:block; 
} 

.right{ 
    text-align:right; 
    width:300px; 
    float:right; 
    padding-top:5px; 
    margin-bottom:15px; 
    font-size:24px; 
    position:relative; 
    float:right; 
    z-index:2; 
} 

.works{ 
    text-align:center; 
    position:relative; 
    float:left; 
    left:30%; 
    font-size:25px; 
    width:100px; 
    display:inline-block; 
} 

.about{ 
    text-align:center; 
    position:relative; 
    float:right; 
    right:30%; 
    font-size:25px; 
    width:100px; 
    display:inline-block; 
} 

.border{ 
    background-color:none; 
    width:100%; 
    height:85px; 
    margin:0 auto; 
    border:none; 
    border-bottom: 6px solid #000; 
    float:none; 
    position:relative; 
} 
/*body stuff*/ 
    #container{ 
    position:static; 
    display:block; 
    margin:0 auto; 
    font-size:0px; 
    margin-top: -10px; 
    width:80%; 
    height:550px; 
} 

    .p1{ 
     background-color: aliceblue; 
     color:000; 
     font-size:12px; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin: 0px; 
     padding:0px; 

    } 

    .p2{ 
     background-color: red; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
    } 
    .p3{ 
     background-color: blue; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
     margin:0px; 
    } 

    .p4{ 
     background-color: purple; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 

    } 

    .p5{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 
    .p6{ 
     background-color: brown; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
     margin-top: 20px; 
    } 

    .p7{ 
     background-color: purple; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 

    } 

    .p8{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 
    .p9{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 

Je suis à environ cinq minutes de mon ordinateur portable drop coups de pieds sur la fenêtre, de sorte que toute forme d'aide serait grandement appréciée! Faites-moi savoir si vous avez besoin de code pour le code HTML.

Answer 1

Quelque chose pour vous aider à démarrer. Je n'ai pas le code HTML que vous utilisez, donc je me suis concentré sur le conteneur. Je l'ai défini comme un flexbox qui le rend réactif. Chaque article a une largeur de 33% et une hauteur de 30px (à des fins de démonstration).

/*body stuff*/ 
 

 
#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0 auto; 
 
    margin-top: -10px; 
 
    width: 80%; 
 
} 
 

 
[class^="p"] { 
 
    width: 33%; 
 
    height: 30px; 
 
} 
 

 
.p1 { 
 
    background-color: aliceblue; 
 
} 
 

 
.p2 { 
 
    background-color: red; 
 
} 
 

 
.p3 { 
 
    background-color: blue; 
 
} 
 

 
.p4 { 
 
    background-color: purple; 
 
} 
 

 
.p5 { 
 
    background-color: green; 
 
} 
 

 
.p6 { 
 
    background-color: brown; 
 
} 
 

 
.p7 { 
 
    background-color: yellow; 
 
} 
 

 
.p8 { 
 
    background-color: red; 
 
} 
 

 
.p9 { 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div class="p1"></div> 
 
    <div class="p2"></div> 
 
    <div class="p3"></div> 
 
    <div class="p4"></div> 
 
    <div class="p5"></div> 
 
    <div class="p6"></div> 
 
    <div class="p7"></div> 
 
    <div class="p8"></div> 
 
    <div class="p9"></div> 
 
</div>

Answer 2

Première: Je viens d'ajouter cette règle CSS en bas (pour écraser les autres règles) et maintenant il fonctionne comme vous le souhaitez:

#container > div { 
    width: 230px; 
    margin-top: 20px; 
} 

https://jsfiddle.net/bhzw7o60/1/

Deuxièmement: Pour les éléments qui ont des paramètres communs (comme vos éléments flottants qui ont tous la même largeur, taille et marge-t op) vous devez utiliser une classe * common * pour chacun d'entre eux et des classes séparées supplémentaires pour les éléments individuels qui ne contiennent que les propriétés différentes. Ma règle ci-dessus le fait pour width et margin-top. Vous pouvez également ajouter le code height et définir uniquement le background-color dans les classes individuelles. BTW: z-index ne fait rien dans ce cas, vous pouvez supprimer cela de toutes les règles.