Question

对于我的生活，我无法弄清楚为什么这段代码不起作用。我正在尝试建立一个个人网站，在我将内容放到位之前，我希望设置所有区域并使其具有响应性。我想要一个3x3网格的盒子，我可以显示我的工作（div id =容器），但每次我特别介绍第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;
    }

我将笔记本电脑从窗户拉出来大约需要五分钟，所以非常感谢任何帮助！如果您还需要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/

第二：对于具有共同参数的元素（如浮动元素，它们都具有相同的宽度，大小和margin-top），您应该为所有这些元素使用* common *类，并为各个元素使用其他单独的类。仅包含不同的属性。我的上述规则适用于width和margin-top。您还可以向其添加height，并仅在各个类中定义background-color。顺便说一句：z-index在这种情况下什么都不做，你可以从所有规则中删除它。

使用float：left;响应css中的额外空间;

2 个答案: