1

我试图将这些“块”堆叠起来，它们之间有一些边距。问题是它们不会“阻塞”它们之间有 3 个像素的空间。它们只是堆叠在一起（典型的 div 标签）。

<div style="display: inline-block; margin: 3px; vertical-align: middle;">
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
</div>​

为什么它不起作用？演示：http: //jsfiddle.net/edgren/Y9gCG/

提前致谢。

4

4 回答 4

3

您应该使用样式表。

除此之外，Theinline-block和其他 css 语句必须在子 div 上：

<div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
</div>​

带有样式表：*

CSS

.child{
    margin: 3px;
    vertical-align: middle;
    display: inline-block;
    background-color: #000000;
    height: 100px;
    width: 100px;
}

HTML

<div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>​
于 2012-12-17T13:05:56.393 回答
0

在内部 div 上应用边距，而不是父级。

于 2012-12-17T13:05:21.327 回答
0

这是一个展示如何做到这一点的小提琴：http: //jsfiddle.net/Y9gCG/3/

div.container div {
 margin-bottom:3px;
 background-color: #000;
 height: 100px;
 width: 100px;"
}
于 2012-12-17T13:06:53.803 回答
0

您正在将 margin 和 inline-block 属性添加到父元素而不是子元素，将代码更改为：

<div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
</div>​

它应该可以工作。

于 2012-12-17T13:06:56.630 回答