显示内联块和图像

Question

我是设计新手,所以有一些问题......

我需要3个块来内联和居中,所以我尝试了:

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

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

PS

正如我所看到的,这个问题出现在safari中,在Firefox中一切正常.

PSS

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

PSSS

我可以想象谷歌,所有问题都在显示:内联块,在safari工程显示:内联表.可能是什么解决方案？

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 居中的父容器中