仅具有内部填充的项目网格 [英] Items grid with inner padding only

问题描述

有哪些技术可以创建在每个项目之间具有填充但仅在网格内具有填充的产品网格?例如，我想要实现的是以下内容:

示例标记:

<div class="item"><!-- 内容-->

CSS:

#container { 宽度:100%;最小宽度:960px；}.item { 浮动:左；宽度:300px；高度:100px；}

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

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

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

内边距宽度应动态计算，例如，如果容器为 960 像素，内边距将为 30 像素宽.

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

到目前为止，所有解决方案都坚持指定间隙/填充的宽度.我想动态计算内边距.我需要指定的唯一宽度是 .item 的宽度，目前固定为 300 像素.

解决方案

响应式网格 with :

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

演示

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

这很简单，并且不使用 IE8 不支持的任何属性.如果您删除边框和 box-sizing 属性，我很确定它可以在 IE7 中获得不错的输出.
只是为了确保，负边距不是黑客":

<块引用>

边距属性允许为负值来源:w3.组织

HTML :

<div id="容器"><div class="item"></div><div class="item"></div>...

CSS :

#wrapper {溢出:隐藏；}#容器 {保证金:-1.5%；背景:浅灰色；}#容器:在{之后内容:'';显示:块；清除:两者；/* 清除浮点数 */}.物品 {保证金:1.5%；宽度:30.3333%；填充底部:10%；/* 模拟空项目的高度 */背景:灰色；边框:1px 实心 #000；向左飘浮;/* 仅当您想为项目添加边框时才跟随 */box-sizing:border-box;}

之后，您只需使用媒体查询更改 .items 的宽度即可在所需断点上重新排列一行中的元素数量.

示例:

@media screen and (max-width: 600px) {.物品 {宽度:47%；}}

What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below:

Sample markup:

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

CSS:

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

(in the above, .item is going to be output 9 times).

The solution would need to be IE8+ compatible and preferably using a technique that isn't a hack. I have tried using display: table with border-spacing property - but this outputs the padding on the outer sides too.

I know I can also add specific classes to items to control whether the padding is shown for that item, but I was hoping for a more 'automated' solution.

Edit: The padding width should be calculated dynamically, so for example if the container is 960px, the padding is going to be 30px wide.

Secondly, if there are less than 3 items on the last row, these should not appear centered on the row, i.e. if there are only two items then the last 'cell' should just be empty.

EDIT: All the solutions so far insist on specfying the width of the gap/padding. I want to have the padding calculated dynamically. The only width I need to specify is that of .item, which is currently a fixed with of 300px.

解决方案

Responsive grid with :

1. fluid width items
2. inner fluid gaps between them
3. IE8+ support (at least)

DEMO

1. add a general percent margins to the items with percent widths, make sure elements widths + left/right magins = 100%;
2. compensate the outer margins (between container and items) by setting a negative margin of the same value on the container
3. add a general wrapper with overflow:hidden;

This is simple and doesn't use any properties unsuported by IE8. I am pretty sure it can have a decent output in IE7 if you remove the borders and the box-sizing property.
Just to make sure, negative margins are not a "hack" :

Negative values for margin properties are allowed source : 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;
}

After, you just need to change the width of the .items with media query to rearange the number of elements in one row on the desired breakpoints.

Example :

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

这篇关于仅具有内部填充的项目网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！