显示内联块和图像

Question

我是设计新手，因此遇到了一些问题...

我需要3个块才能内联和居中，所以我尝试了：

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
}

但是，当我将图像添加到块中时，所有其他图像都会下降。

P.S。

正如我所看到的，这个问题出现在safari中，在Firefox中都可以。

P.S.S

<div id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>

P.S.S.S

我可以想象谷歌，所有问题都在显示：inline-block，在safari工程中显示：inline-table。可能是什么解决方案？

Answer 1

您需要设置垂直对齐属性。在这种情况下，最佳选择可能是：

vertical-align: top

所以你的css应该是：

#main .block{
    display: inline-block;
    border: 1px solid #ECEDE8;
    margin: 10px 10px;
    overflow: hidden;
    height: 265px;
    width: 265px;
    vertical-align: top;
}

Answer 2

如果您的块是固定宽度，为什么不将它们浮动并将它们放在总宽度的父容器中并使用margin定居：0 auto

Answer 3

尝试一下-

<div class="main" id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>

不是#main .block{而是.main {