Question

我有以下代码：

    <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需要一些不可见的空间）。

Answer 1

您应该使用position:absolute内部position:relative元素的显示方式此外，要避免水平滚动条，请使用overflow-y。

工作示例：http://jsbin.com/uveni3

Answer 2

使用“inline-block”属性时，应始终以DTD格式启动HTML开始标记。在那里放置一个应解决此问题。

内联块因相对定位而混乱

2 个答案: