问题描述
有什么技术可以创建产品网格,每个项目之间有填充,但只在网格内?例如,我想实现的是以下:
示例标记:
< 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
响应网格:
- 流体宽度项
- 内部流动间隙
- IE8 +支持最少)
- 在百分比宽度的项目中添加一般百分比边距,确保
element width + left / right magins = 100%;
- 通过设置相同的负边距来补偿外边距值
- fluid width items
- inner fluid gaps between them
- IE8+ support (at least)
- add a general percent margins to the items with percent widths, make sure
elements widths + left/right magins = 100%;
- compensate the outer margins (between container and items) by setting a negative margin of the same value on the container
- add a general wrapper with
overflow:hidden;
添加一个包含
overflow:hidden;
b $ b
这很简单,不使用IE8取消的任何属性。我确定如果你删除边框和box-sizing属性,它可以有一个体面的输出在IE7如果你确定,负边距不是一个黑客:
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
@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 :
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" :
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%;
}
}
这篇关于仅带内填充的项网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!