Question

我正在尝试获得网格显示。

我使用内联块显示和margin-right创建了div。

我的问题是每行的最后一项也有一个多余的边距。

这是我的CSS

.item{
    height:20px; 
    width:50px; 
    background:red;
    margin-right:50px;
    display:inline-block;
    border:2px solid black;
}

.container{
    background-color:green;
    width:270px;
}

这是HTML

的示例

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

这是演示我所拥有的东西的小提琴 http://jsfiddle.net/8HPWn/

在项目中，每个项目的宽度可以变化，所以我不能假设它是每个第N个孩子或类似的东西。

如何摆脱多余的保证金权利？

Answer 1

这是我能想到在纯CSS中执行此操作的唯一方法，但它需要一些额外的标记：

添加内部容器：

<div class="container">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

将overflow: hidden添加到.container

.container{
    background-color:green;
    width:270px;
    overflow: hidden;
}

使用calc调整.inner的宽度以适应您的边距，并使用负边距进行补偿：

.inner {
    width: calc(100%+50px);
    margin-right: -50px;
    background: rgba(0,0,0,0.4);
}

- Working demo

- Browser support for calc

css - 摆脱网格布局中的冗余边距

1 个答案: