0

150px の div の 6x4 配列があり、それぞれに 5px のマージンがあります (Metro UI を想像してください)。モーダルdivもあります。正方形の div はすべてdisplay: inline-block、親 div の中央に配置さtext-alignれ、6 ごとに改行があります (6x4 グリッドを作成するため)。私のモーダル（これも中央に配置marginされています）がポップアップすると、中央に配置されているタイルとわずかにずれています。これはなぜでしょうか？これは大したことではありませんが、その下の正方形のタイルと整列しており、すべてが 1 ～ 2 ピクセルずれていると見栄えが悪くなります。これに違いがtext-align: centerありmargin: auto、これを引き起こしている可能性はありますか？

HTML から:

<div id="container">
<br />
<div id="tile11">

</div>
<div id="tile12">

</div>
<div id="tile13">

</div>
<div id="tile14">

</div>
<div id="tile15">

</div>
<div id="tile16">

</div>
<br />
<div id="tile21">

</div>
<div id="tile22">

</div>
...........
<div id="tile46">

</div>
</div>

CSS から:

#container {
background: #000000;
width: 1000px;
height: 680px;
z-index: 1;
text-align: center;
margin: 10px auto 0px auto;
}

#tile44 {
background: #333333;
width: 150px;
height: 150px;
margin: 5px;
display: inline-block;
z-index: 1;
}
4

1 に答える 1

1

これを手始めに：

http://jsfiddle.net/HdHRe/10/

#container {
   background: #000000;
   width: 960px;
   height: 680px;
   margin: 0 auto;
   padding: 5px;
   overflow: auto;
}

#container div {
   background: #333333;
   width: 150px;
   height: 150px;
   margin: 5px;
   float: left;
}

</p>

グリッドを作成するより良い方法だと思います。次に、モーダル ウィンドウを表示する場所を知る必要があります。

于 2012-11-15T14:45:18.247 に答える