Html 内联块增加图元之间的间距并保持对齐_Html_Css

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

html css

Html 内联块增加图元之间的间距并保持对齐,html,css,Html,Css,在内联块容器中增加元素之间的空间有一个问题。我发现了一个技巧，但它只适用于第一行。。。顺便说一下，我有n个元素和一个特定的容器宽度代码： <!DOCTYPE html> <html> <head> <style> .container { background-color: blue; height: 300px;

在内联块容器中增加元素之间的空间有一个问题。我发现了一个技巧，但它只适用于第一行。。。顺便说一下，我有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>

.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;
}


.集装箱{
背景颜色：蓝色；
高度：300px；
宽度：620px；
显示：内联块；
}
.货柜组{
左边距：33像素；
}
.儿童1{
宽度：200px；
高度：100px；
显示：内联块；
背景色：红色；
}
.儿童2{
宽度：200px；
高度：100px；
显示：内联块；
背景颜色：绿色；
}
.儿童3{
宽度：200px；
高度：100px；
显示：内联块；
背景颜色：黄色；
}

结果：

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

多谢各位

要做到这一点，你可以使用一种叫做Flexbox的奇妙工具

首先，将容器设置为

display:flex

。然后使用

flex wrap:wrap

，这样如果添加更多元素，它们将显示在下面的新行中。还要确保使用

align content:flex start

，以便元素从左侧开始。最后，为所有子div添加左边距和底部距，以便它们之间有空间。由于我们使用Flexbox，您的保证金问题现在将被消除

如果希望div完全适合容器，只需删除子div的边距，并将父div设置为

justify content:space-between

CSS代码：

<!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>

.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;
}

另一种解决方案是，如果您不想使用Flexbox，只需选择每三个子项，然后将左边距设置为0：

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

希望有助于

使用第n个孩子选择器选择每三个孩子

使用

右边距

而不是

左边距

.container div {
  margin-right: 33px;
}

.container{
背景颜色：蓝色；
高度：300px；
宽度：620px；
显示：内联块；
}
.货柜组{
右边距：33像素；
}
.儿童1{
宽度：200px；
高度：100px；
显示：内联块；
背景色：红色；
}
.儿童2{
宽度：200px；
高度：100px；
显示：内联块；
背景颜色：绿色；
}
.儿童3{
宽度：200px；
高度：100px；
显示：内联块；
背景颜色：黄色；
}

你试过这个吗

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

在样式部分中插入此代码段，应该可以。它只适用于最后一个div。

这不起作用，因为我需要在容器的两个边缘都有正确的边距。。。（我需要中间的空间）似乎给出了预期的结果。您能给出一个您认为不可行的DOM示例吗？是的，只需检查容器元素，并使宽度变小，（双击并滚动它），您就会注意到当容器宽度到达边距而不是实际的子元素时，元素正在下降。。我不想那样。。