3

次のコードがあります。

    <HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">

<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">

<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>

<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>

</div>

</BODY>
</HTML>

必要な display: inline-block プロパティを削除しない限り、2 番目の div は 32 x の位置に配置されません。これを回避する方法はありますか？

編集: display: inline-block を削除するとうまくいくようですが、スクロールバーが水平に表示されます (div が見えないスペースを取るため)。

4

2 に答える 2

1

position:absolute内部にある場合は、要素が表示される 方法を使用する必要がありますposition:relative。
さらに、水平スクロール バーを回避するには、 を使用しますoverflow-y。

作業例: http://jsbin.com/uveni3

于 2010-01-17T12:40:53.380 に答える
0

「インライン ブロック」プロパティを使用する場合は、常に HTML 開始タグを DTD 形式で開始する必要があります。そこに配置すると、これが解決するはずです。

于 2011-09-12T01:20:32.070 に答える