Question

我试图制作一个弹性布局，将左右边距与页面的最左边和最右边对齐，无论该线上显示了多少项。

.thumb {
    float: left;
    width:16%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4%;
    background: pink;
    height: 200px;
}
.thumb:nth-child(5n) {
    margin-right: 0px;
    box-shadow:inset 0 0 0 3px red;
}
.thumb:nth-child(5n+1) {
    margin-left: 0px;
    box-shadow:inset 0 0 0 3px blue;
}
@media (max-width: 1200px) {
    .thumb, .thumb:nth-child(1n) {
        width:21%;
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 4%;
        box-shadow: 0 0;
    }
    .thumb:nth-child(4n) {
        margin-right:0;
        box-shadow:inset 0 0 0 3px yellow;
    }
    .thumb:nth-child(4n+1) {
        margin-left:0;
        box-shadow:inset 0 0 0 3px blue;
    }
}
@media (max-width: 600px) {
    .thumb, .thumb:nth-child(1n) {
        width:46%;
    }
    .thumb:nth-child(2n) {
        margin-right:0;
        box-shadow:inset 0 0 0 3px gray;
    }
    .thumb:nth-child(2n+1) {
        margin-left:0;
        box-shadow:inset 0 0 0 3px blue;
    }
}
@media (max-width: 400px) {
    .thumb, .thumb:nth-child(1n) {
    width:100%;
    display:block;
    margin:0;
    box-shadow: inset 0 0 5px 1px;
    }
}
#left {
    float: left
}
#right {
    float: right
}

我相信我正在使用第n个孩子从左侧和右侧最粉红色的盒子中移除边距，因此它们对齐但是当我运行时它看起来不正确。谁能告诉我哪里出错了？

Answer 1

当您从行上的第一个和最后一个元素中删除边距时，宽度+边距的总和不是100％。例：如果你有5个盒子，宽度为16％，边距为左右2％，则总数为100％。但是，如果您从第一个框中删除2％的保证金，从最后一个框中删除2％的保证金，则总计为96％。有意义吗？

带媒体查询的弹性布局 - 边距不正确

1 个答案: