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 属性，否则第二个 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

使用“inline-block”属性时，您应该始终以 DTD 格式开始 HTML 开始标记。放一个应该可以解决这个问题。

于 2011-09-12T01:20:32.070 回答