応答CSSの余分なスペースは、float：left;

Question

私の人生にとって、私はこのコードがうまくいかない理由を理解できません。私は個人的なウェブサイトを設定しようとしています。私は自分のコンテンツを配置する前に、すべてのエリアをセットアップして応答性にしたいと思っています。私は自分の作品（div id = container）を表示できるボックスの3x3グリッドが必要ですが、9番目のdivブロックを具体的に紹介するたびに（p9）、アレンジメントは一見何の理由もなく壊れます。ここでは、デスクトップのレイアウトのためのコードは次のとおりです。

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

私は窓の外に私のラップトップを蹴るドロップから約5分ですので、ヘルプのいずれかの種類をいただければ幸いです！ htmlのコードも必要であれば教えてください。

Answer 1

何かを始めることができます。私はあなたが使用するHTMLを持っていないので、私はコンテナに焦点を当てました。 私はそれを応答性にするフレックスボックスと定義しました。各アイテムの幅は33％、高さは30px（デモ用）です。

/*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

まず：私はちょうど（他のルールを上書きする）下部に、このCSSルールを追加し、必要に応じて、今それが動作：

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

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

2番目：共通のパラメータを持つ要素の場合（浮動要素の幅、サイズ、余白がすべて同じ場合） op）では、すべてのクラスに* common *クラスを使用し、異なるプロパティのみを含む個々の要素に対して別のクラスを追加する必要があります。私の上記のルールはwidthとmargin-topのためにこれを行います。また、heightを追加して、個々のクラスにbackground-colorを定義することもできます。この場合、z-indexは何もしません。すべてのルールから削除することができます。