Question

我有一个问题是增加内联块容器中元素之间的空间。我找到了一个诀窍，但它只适用于第一行...... 顺便说一句，我有n个元素和一个特定的容器宽度。

代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .container {
                background-color: blue;
                height: 300px;
                width: 620px;
                display: inline-block;
            }

            .container div + div {
                margin-left: 33px;
            }

            .child1 {
                width:200px;
                height: 100px;
                display:inline-block;
                background-color: red;
            }

            .child2 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: green;
            }

            .child3 {
                width: 200px;
                height: 100px;
                display: inline-block;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
        </div>
    </body>
</html>

结果：

（注意：它必须支持所有浏览器，+ IE7）

非常感谢！

Answer 1

使用nth-child选择器选择每三个孩子！

https://jsfiddle.net/25x4ga0g/1/

.container div:nth-child(2n + 1) {
  margin-left: 0px;
}

More about nth-child selector

Answer 2

为此，您可以使用名为Flexbox的精彩内容。

首先，将容器设置为display: flex。然后使用flex-wrap: wrap，这样如果添加更多元素，它们就会显示在下面的新行中。还要确保使用align-content: flex-start，以便元素从左侧开始。最后为所有child-div添加margin-margin和margin-bottom，以便它们之间有空格。因为我们使用的是Flexbox，所以现在可以消除您的保证金问题。

如果您希望div完全适合容器，只需删除子div的边距并将父级设置为justify-content: space-between。

CSS代码：

.container {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   width: 620px;
   height: 300px;
   background-color: blue;
}

.container div {
   margin-right: 33px;
   margin-bottom: 5px;
}
.child1 {
   width: 200px;
   height: 100px;
   display:inline-block;
   background-color: red;
}

.child2 {
   width: 200px;
   height: 100px;
   display: inline-block;
   background-color: green;
}

.child3 {
   width: 200px;
   height: 100px;
   display: inline-block;
   background-color: yellow;
}

Working Fiddle

Read more about Flexbox

如果您不想使用Flexbox，则可以选择其他解决方案，您可以选择每隔三个子项，然后将margin-left设置为0：

.container div:nth-child(3n) {
   margin-left: 0;
}

希望有所帮助

Answer 3

使用.container div { margin-right: 33px; }代替.container { background-color: blue; height: 300px; width: 620px; display: inline-block; } .container div { margin-right: 33px; } .child1 { width: 200px; height: 100px; display: inline-block; background-color: red; } .child2 { width: 200px; height: 100px; display: inline-block; background-color: green; } .child3 { width: 200px; height: 100px; display: inline-block; background-color: yellow; }。

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

{{1}}

{{1}}

Answer 4

你试过这个吗？

div+div:last-of-type{
            margin:0px;
        }

将此代码段插入样式部分，它应该没问题。它只适用于最后一个div。

内联块增加元素之间的间距并保持对齐

4 个答案: