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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…