1

幅 970px の div があります。(もちろん、ボーダー、マージン、パディングは除外されます)。この中に 2 つの div を並べて配置しています。CSS は次のとおりです。

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }

これで、内部 div の合計幅が 966px 以下の場合に問題なく動作します。ただし、それよりも大きくなると、2 番目の div が最初の div の下に配置されます。これはなぜですか？

私の知る限り、問題が発生する前に合計幅を 970px にできるはずですか?

4

3 に答える 3

1

HTML でこれら 2 つの の間に新しい行があるに違いありませんdiv。それが理由です。

次の CSS の場合:

#main { width: 970px; }

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

次の 2 つの HTML マークアップには違いがあります。

<div id="main">
    <div id="content"></div><div id="sidebar"></div>
</div>

と

<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

この例を確認してください: http://jsfiddle.net/vnguQ/ 2番目の部分の要素間の白い線に注意してください。

于 2013-04-03T06:13:53.253 に答える
0

両方の div の間に空白がありinline block、その空白にスタイルを適用する場合があります。これらのリンクを参照して くださいhttp://css-tricks.com/fighting-the-space-between-inline-block-elements/ margin インラインブロック要素間のスペースを削除するには?

于 2013-04-03T06:17:21.363 に答える