仅带内填充的项网格 [英] Items grid with inner padding only

问题描述

有什么技术可以创建产品网格，每个项目之间有填充，但只在网格内？例如，我想实现的是以下：

示例标记：

  < div id =container> 
< div class =item> 
<！ -  content  - > 
< / div> 
< / div> 
  

CSS：

 code> #container {width：100％; min-width：960px; } 
 .item {float：left; width：300px; height：100px; } 
  

（在上面， .item 将要输出9次）。

解决方案需要是IE8 +兼容，最好是使用不是黑客的技术。我已经尝试使用 display：table 和 border-spacing 属性 - 但这也输出外侧的填充。

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

编辑：填充宽度应该动态计算，例如，如果容器为960像素，则填充宽度为30像素。

其次，如果最后一行中有少于3个项目，那么这些项目不应该出现在行的中央，即如果只有两个项目，那么最后一个'单元格'应该是空的。

编辑：迄今为止的所有解决方案都坚持规定间隙/填充的宽度。 我想动态计算padding。我需要指定的唯一宽度是 .item ，目前是固定的300px

解决方案

响应网格：

1. 流体宽度项


2. 内部流动间隙


3. IE8 +支持最少）

DEMO

1. 在百分比宽度的项目中添加一般百分比边距，确保 element width + left / right magins = 100％;


2. 通过设置相同的负边距来补偿外边距值

添加一个包含 overflow：hidden; b
$ b

这很简单，不使用IE8取消的任何属性。我确定如果你删除边框和box-sizing属性，它可以有一个体面的输出在IE7如果你确定，负边距不是一个黑客：




允许使用margin属性的负值 source：w3.org




HTML：





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





  #wrapper {
 overflow：hidden; 
} 
 #container {
 margin：-1.5％; 
 background：lightgrey; 
} 
 #container：after {
 content：''; 
 display：block; 
 clear：both; / *清除浮动数据* / 
} 
 .item {
 margin：1.5％; 
 width：30.3333％; 
 padding-bottom：10％; / *模拟空项目的高度* / 
 background：gray; 
 border：1px solid＃000; 
 float：left; 
 
 / *如果你想为项目添加边框* / 
 box-sizing：border-box; 
} 
  

之后，您只需要更改



例如：

$ b

$ b

  @media screen and（max-width：600px）{
 .item {
 width：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屋！