0

DIV 内に 3 つの DIV があります。ボックスには画像があります。現在、これらは将来のイメージ プレースホルダーです。

display: inline-block;一列に並べて使用したいと思います。何らかの理由で、それらはまだ水平ではなく垂直です。floatfloat は別の場所で使うべきだと思うので使いたくありません。

HTML:

<div class="quickboxes">
  <div id="box1"><img name="" src="" width="75" height="75" alt="">1</div>
  <div id="box2"><img name="" src="" width="75" height="75" alt="">2</div>
  <div id="box3"><img name="" src="" width="75" height="75" alt="">3</div>
</div>

CSS:

.quickboxes {
    display: inline-block;
}

#box1 {
    width: auto;
}

#box2 {
    width: auto;
}

#box3 {
    width: auto;
}
4

4 に答える 4

1

使用を避ける別の方法inline-blockは、フロートを使用することです。それらを左にフロートさせ、各divsのフロートをクリアします。

于 2013-03-06T21:25:04.927 に答える
1

表示:インラインブロック; 含まれる div ではなく、画像 div の css に含める必要があります。

于 2013-03-06T18:13:45.307 に答える
1

ルールを追加します。

#box1, #box2,#box3 {
display:inline-block;
}

jsFiddle の例

ボックスを一列に並べるには、親コンテナーだけでなく、ボックスに inline-block プロパティも設定する必要があります (これはおそらく必要ありません)。

于 2013-03-06T18:14:03.480 に答える
0

次のように、両方に inline-block を含めたほうがよいでしょう。

.quickboxes {
    display: inline-block;
}
#box1, #box2,#box3 {
display:inline-block;
}

これらのボックスを中央に配置するには

.quickboxes {
    display: inline-block;
position: relative;
left: -50%; /*- is important for outer div*/
}
#box1,#boc2,#box3{
display: inline-block;
position: relative;
left: 50%; /* + is important for inner div*/
}
于 2013-03-07T06:58:35.390 に答える