Question

我有3个盒子，第一个有点，然后是另外2个.. 其他2个盒子在彼此旁边并且在同一行中是可以的..但是第一个盒子它与另一个盒子不在同一条线上......它的几个像素。

这是css代码

#services1 {
    float:left;
    width: 33%;
    padding: 100px 0px 0px 0px;
    text-align: center;
    background-color: black;
    height: 400px;

}

#services2 {
    float:left;
    width:33%;
    padding: 80px 0px 0px 0px;
    text-align: center;  
    background-color: black;
    height: 400px;
}

#services3 {
    float:left;
    width: 33%;
    padding: 80px 0px 0px 0px;
    text-align: center;
    background-color: black;
    height: 400px;

}

我如何解决这个问题？

Answer 1

使用此css -

box-sizing: border-box;

每个盒子上都有

。这有助于您生成所需且准确的结果。 Fiddle

Answer 2

将第一个框上的填充减少到80px（与其他两个框相同）。填充值会增加框的整体高度。

＆＃13;

#services1 {
    float:left;
    width: 33%;
    padding: 80px 0px 0px 0px;
    text-align: center;
    background-color: lightblue;
    height: 400px;

}

#services2 {
    float:left;
    width:33%;
    padding: 80px 0px 0px 0px;
    text-align: center;  
    background-color: tomato;
    height: 400px;
}

#services3 {
    float:left;
    width: 33%;
    padding: 80px 0px 0px 0px;
    text-align: center;
    background-color: lightblue;
    height: 400px;

}

＆＃13;

<div id="services1"></div>
<div id="services2"></div>
<div id="services3"></div>

＆＃13;

Answer 3

更新第一个块，您需要将100px填充到80px

#services1 {
    float:left;
    width: 33%;
    padding: 80px 0px 0px 0px;
    text-align: center;
    background-color: red;
    height: 400px;

}

Answer 4

由于padding-top: 100px;其他两个方框正在填充80px .. Demo

由于所有方框均为400px height padding，因此您可以调整height或更改第1个方框的padding to 80px。

#services1 {
    float:left;
    width: 33%;
    padding: 100px 0px 0px 0px;
    text-align: center;
    background-color: red;
    height: 380px; / *changed value*/

}

盒子结构搞砸了

4 个答案: