我可以把盒子放在每行三个，等间距，并粘在容器左右两边？ [英] Can I place boxes three in each row, equally spaced and glued to container on left and right?

问题描述

我认为这不能在CSS中完成，但在这里的人比我知道的更多。 ; - ）

I think this can't be done in CSS, but there are people here who know more than I do. ;-)

我在容器中有几个盒子。我想要盒子在每行三个，并与容器在左边和右边接触。我想要他们之间有相等的水平空间。

I have a couple of boxes inside a container. I want the boxes to be three in each row and in contact with the container at left and right. And I want equal horizontal spaces between them.

可以做到吗？这里有一个小调： http://jsfiddle.net/lborgman/XtCQJ/1/

Can that be done? There is a fiddle here: http://jsfiddle.net/lborgman/XtCQJ/1/

最后一行（第二行）？可以对间距做什么？

And what about the last (second) row? What can be done to the spacing there?

<div id="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>    

#container {
    background: green;
    width: 80%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
#container div {
    background: blue;
    display: inline-block;
    width: 27%;
    height: 30%;
    margin-left: auto;
    margin-right: auto;
}

推荐答案

使用宽度和边距。 查看此更新的小提琴作为示例。相关代码如下：

It can be done by logical use of widths and margins. Check this updated fiddle as an example. The relevant code is below:

#container div {
    width: 32%; 
    margin-right: 2%;
    margin-bottom: 2%;
}
#container div:nth-child(3n) {
    margin-right: 0;
}

每个线的总宽度加起来为100％ ％宽度和两个2％的边距。

The total width for each "line" adds up to 100%: three 32% widths, and two 2% margins. The third item on every line has it's right margin removed with an nth selector.

您不必使用百分比，但概念将始终保持不变 - 除法你的宽度和边距，以便完全适合他们的父母（或稍微减少），并警惕额外的像素从边界。

You don't have to use percentages, but the concept will always remain the same - divide up your widths and margins so as to fit their parent perfectly (or just slightly less), and be wary of extra pixels from borders.

注意：我建议反对使用百分比高度，因为它们可能会导致问题。

Note: I would advise against using percentage heights, as they can cause problems.

这篇关于我可以把盒子放在每行三个，等间距，并粘在容器左右两边？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！