使用 float:left 在响应式 css 中额外 space；

Question

我这辈子都弄不明白为什么这段代码不起作用。我正在尝试建立一个个人网站，在我将内容放置到位之前，我想设置所有区域并使其响应。我想要一个 3x3 的盒子网格，我可以在其中展示我的作品（div id = 容器），但每次我特别介绍第九个 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;
    }

我距离将笔记本电脑踢出 window 大约五分钟，所以非常感谢任何形式的帮助！如果您还需要 html 的代码，请告诉我。

Answer 1

让您入门的东西。我没有您使用的 HTML，所以我专注于容器。我将它定义为一个 flexbox，使其具有响应性。每个项目的宽度为 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/

其次：对于具有共同参数的元素（例如具有相同宽度、大小和边距顶部的浮动元素），您应该对所有这些元素使用 * common* class 并附加单独的元素classes 用于仅包含不同属性的单个元素。我的上述规则针对 width 和 margin-top 执行此操作。您还可以向其中添加 height，并且只在单个 class 中定义 background-color。顺便说一句：z-index 在这种情况下什么都不做，您可以从所有规则中删除它。

使用 float:left 在响应式 css 中额外 space；

Extra space in responsive css using float:left;

css

space

responsive