0

たとえば、幅が 100px の div コンテナを作成し、2 つの div 要素を 1 つを左に、もう 1 つを右に、それぞれ 2px の境界線と 46px の幅で配置すると、同じ行に並べて描画する必要があります。親コンテナの幅全体をカバーします。これは Firefox と Chrome で発生しますが、IE9 はそれらを別々の行に描画します。他のブラウザーと同じ効果を得るには、親要素で 102px の幅を指定する必要があります。何故ですか？

コードは次のとおりです。

<html>

<head>

<style>

div {
margin:0;
padding:0;
}

</style>

</head>

<body>

<div style="border: 5px solid;width:100px;height:100px">

<div style='border:2px solid green;width:46px;height:46px;float:left'></div>

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div>
<div>

</body>

</html>
4

2 に答える 2

0

display: inline-block個人的には、フロートを使用するよりもむしろ使用したいと思います。

とにかく、問題の最も可能性の高い原因は、2 つの<div>要素間の空の空白です。2番目のものを下にシフトしている可能性があります。削除してみてください（つまり<div...>...</div><div...>...</div>）

于 2012-04-07T11:48:04.370 に答える