仅具有内部填充的项目网格

Question

有哪些技术可用于创建在每个项目之间具有填充但仅在网格内有填充的产品网格？例如,我想要实现的目标如下:

样本标记:

<div id="container">
    <div class="item">
         <!-- content -->
    </div>
</div>

CSS:

#container { width: 100%; min-width: 960px; }
.item { float: left; width: 300px; height: 100px; }

(在上面,.item将输出9次).

该解决方案需要与IE8 +兼容,并且最好使用不是黑客的技术.我已经尝试使用display: table与border-spacing属性-但这也输出上外侧的填充.

我知道我还可以为项目添加特定的类来控制是否为该项目显示填充,但我希望有一个更"自动化"的解决方案.

编辑:填充宽度应该动态计算,例如,如果容器是960px,填充将是30px宽.

其次,如果最后一行上的项目少于3个,则这些项目不应该出现在行的中心,即如果只有两个项目,则最后一个"单元格"应该为空.

编辑:迄今为止所有解决方案都坚持要求指出间隙/填充的宽度.我想动态计算填充.我需要指定的唯一宽度是,.item当前固定为300px.

Answer 1

响应式网格:

1. 流体宽度项目
2. 它们之间的内部流体间隙
3. IE8 +支持(至少)

DEMO

1. 为百分比宽度的项添加一般百分比边距,确保 elements widths + left/right magins = 100%;
2. 通过在容器上设置相同值的负边距来补偿外边距(在容器和项目之间)
3. 添加一个通用包装器 overflow:hidden;

这很简单,不使用IE8不支持的任何属性.我很确定如果你删除边框和box-sizing属性,它在IE7中可以有一个不错的输出.
只是为了确保,负利润不是"黑客":

允许保证金属性的负值来源:w3.org

HTML:

<div id="wrapper">
    <div id="container">
        <div class="item"></div>
        <div class="item"></div>
        ...
    </div>
</div>

CSS:

#wrapper {
    overflow:hidden;
}
#container {
    margin: -1.5%;
    background:lightgrey;
}
#container:after {
    content:'';
    display:block;
    clear:both;  /* clear the floats */
}
.item {
    margin:1.5%;
    width:30.3333%;
    padding-bottom:10%;  /* to simulate height on the empty items */
    background:grey;
    border: 1px solid #000;
    float:left;

    /* following only if you want to add borders to the items */
    box-sizing:border-box;
}

之后,您只需要更改.itemswith media查询的宽度,以重新排列所需断点上一行中的元素数.

示例:

@media screen and (max-width: 600px) {
    .item {
        width:47%;
    }
}