相対位置とインラインブロック台無しアップ

StackOverflow https://stackoverflow.com/questions/2080956

  •  21-09-2019
  •  | 
  •  

質問

私は、次のコードを持っています：

    <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>
インラインブロック性、私が必要です。私は表示を削除しない限り、

は第二のdivは32×位置に配置されていません。これを回避する方法はありますか？

編集：私は、ディスプレイ削除した場合、それは仕事に思える：インラインブロックを、しかし（div要素がいくつか見えないスペースをとるよう）その後、スクロールバーが水平に表示されます。

役に立ちましたか？

解決

あなたはposition:absolute要素が内部position:relative表示方法を使用する必要があります。
また、水平スクロールバーを避けるために、overflow-yを使用しています。

ワーキング例： http://jsbin.com/uveni3する

他のヒント

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top