css - 去除网格布局中的冗余边距

Question

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

我创建了带有内嵌 block 显示和右边距的 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>

这是一个 fiddle 来展示我所拥有的 http://jsfiddle.net/8HPWn/

在元素中，每个元素的宽度可能会有所不同，所以我不能假设它是每 N 个 child 或类似的东西。

我怎样才能摆脱多余的边际权利？

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 的宽度以适应您的边距 nad 使用负边距来补偿:

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

- Working demo

- Browser support for calc