Question

我已经构建了一个静态仪表板，用CSS设计。它正是我想要的，但“数据库搜索”框被撞到了不合适的位置。我使用CSS为每一行设置10px的底部边距，但看起来这一个框比它上面的一个框低20px。我在代码中看不到任何解释这个的东西。如何让这个盒子玩得很好，与它旁边的“网站访问者”框一致？

此处代码：https://jsfiddle.net/oyayzze5/

.lg {

    width: 700px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;

}

.med {

    width: 500px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;
    display: inline-block;
}

.sm {

    width: 175px;
    height: 175px;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
    position: relative;
    display: inline-block 
}

.left-margin   {

    margin-left: 15px;

}

.row    {

    margin-bottom: 10px;
}

h2 {

    text-align: center;
}

p   {

    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.blue   {

        border-color: #41B6E6;
    background: linear-gradient(to bottom, #41B6E6 0%,#41B6E6 45%,white 45%,white 100%);

}

.red    {

    border-color: #ce2029;
    background: linear-gradient(to bottom, #ce2029 0%,#ce2029 45%,white 45%,white 100%);

}

.green  {

    border-color: #C4D600;
    background: linear-gradient(to bottom, #C4D600 0%,#C4D600 45%,white 45%,white 100%);

}

.orange {

    border-color: #E35205;
    background: linear-gradient(to bottom, #E35205 0%,#E35205 45%,white 45%,white 100%);

}

Answer 1

第一个答案是正确的，但我会这样做：

.sm, .med, .lg {
    vertical-align: top;
}

详细说明：

由于您已将所有这些课程设置为display: inline-block;，因此vertical-align适用。由于您在该行的小红色容器中放置了<br> h2，并且由于vertical-align的默认值为baseline，因此它将行的中心向下推并放弃了对齐。

边距：行中其他框的偏移量

1 个答案: