Question

我想在容器内将孩子隔开一定数量的像素。使用边距会导致子代与容器本身隔开一定距离，从而产生边框。

如何最好避免这种边界。

我曾考虑过在容器上使用负边距来补偿额外的间距，但这似乎很麻烦。

子级是内联的，并且自然会溢出，因此与列或行不同，您无法使用first/last-child选择器删除前导/后缀

示例

<div id="parent">
    <div></div> 
    <div></div>
    <div></div>
   <!-- More children... -->
</div>

孩子应该隔开，但不能与父母隔开。第三个孩子自然溢出。

#parent {
    width: 300px;
    display: flex;
    flex-wrap: wrap
}
#parent > * {
    display: inline-block;
    width: 110px;
    height 110px;
    flex-grow: 1
}

我正在手机上编写此代码，因此很难格式化代码。

Answer 1

由于您确定flex或grid都不适合您的问题，因此使用老式的负边距替代方法不会感到羞耻。

请注意，在此解决方案中wrapper元素是可选的。

.wrapper {
    border: 1px solid #FF0000;
    max-width: 300px;
    overflow: hidden;
    width: 100%;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col {
    background: #FFCCCC;
    height: 110px;
    margin: 10px;
    max-width: 110px;
    padding: 5px;
    width: 100%;
}

<div class="wrapper">
    <div class="container">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <!-- More items... -->
    </div>
</div>

最佳的无国界儿童隔离空间？

1 个答案: