内联块与相对定位混淆答案

【问题标题】：inline-block messes up with relative positioning内联块与相对定位混淆
【发布时间】：2011-09-12 09:20:32
【问题描述】：

我有以下代码：

    <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 占用了一些不可见的空间）。

【问题讨论】：

标签： html css-position css

【解决方案1】：

你应该使用position:absolute元素在position:relative中的显示方式。
另外，要避免水平滚动条，请使用overflow-y。

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

【讨论】：

尝试运行代码，您将看到两个元素，其中第二个元素 not 位于 x: 32;即使我把它放在那里。
哦，但我做到了：jsbin.com/aqoju。您能否展示您想要实现的目标的图片或类似网站？
是的，但我不能像那样使用绝对定位...试试我帖子上的修改版本。
试试这个：jsbin.com/uwiva3。滚动条可能是另一个问题......

【解决方案2】：

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

【讨论】：