5

私はデザインが初めてなので、いくつかの問題があります...

ここに画像の説明を入力

インラインで中央に配置するには3つのブロックが必要なので、試しました：

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

しかし、ブロックに画像を追加すると、他のすべてがダウンします。

PS

ご覧のとおり、この問題はサファリにあり、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

私がGoogleで考えたように、すべての問題はdisplay: inline-block、safariのworks display: inline-tableにあります。どのような解決策が考えられますか?

4

4 に答える 4

7

垂直方向の配置プロパティを設定する必要があります。この場合、おそらく最良のオプションは次のとおりです。

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;
}
于 2012-06-13T23:46:51.217 に答える
0

ブロックが固定幅の場合、代わりにそれらをフロートして、合計幅の親コンテナーに配置し、margin: 0 auto を使用して中央に配置してみませんか?

于 2012-06-13T23:44:41.583 に答える