0

我有一个这样的 HTML 结构：

<div>
    <div style="position:relative;">
        <div style="position:absolute;float:left;top:0;left:0;width:50px;">57</div>
        <div style="width:550px;position:absolute;float:left;top:0;left:50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
    </div><br /><br />

    <p style="margin-left:50px;">This is my paragraph</p>
</div>

从THIS FIDDLE可以看出，我的 Lorem Ipsum 文本与我的段落重叠。<br />我尝试在我的 div 和我的段落之间放置一些东西，但它们仍然重叠。我希望我的段落出现在我的文本之后。请问有什么帮助吗？

谢谢

4

4 回答 4

0

您不要使用 position:absolute 和浮点数。在这种情况下，您可以只使用浮点数并摆脱位置和相关的 css。就这样就好了：

<div>
    <div style="position:relative;">
        <div style="float:left;width:50px;">57</div>
        <div style="width:550px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec imperdiet sagittis pretium. Quisque pellentesque malesuada eros sit amet fringilla. Cras egestas vehicula pharetra. Nunc mattis aliquam erat pharetra tempus. Sed magna dui, facilisis nec pharetra dignissim, lobortis vel nulla. Etiam tellus dui, dapibus sit amet sodales vitae, tempus eu felis. Nam interdum sagittis libero, nec sagittis nisl dapibus et. Nulla facilisi.</div>
    </div><br /><br />

    <p style="margin-left:50px;">This is my paragraph</p>
</div>

不过，正如评论所建议的那样 - 您应该将其放在样式表中并避免内联声明。它更清洁，更容易维护。

于 2013-05-22T17:13:19.437 回答
0

删除您的绝对位置并放入clear: both您的段落以重置浮动元素

<div>
        <div style="position:relative;">
            <div style="float:left;width:40px;">57</div>
            <div style="width:550px;float:left;left:40px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed ipsum eu justo ornare euismod. Suspendisse bibendum venenatis nisl, ut blandit odio aliquet sit amet. Donec ultricies purus eu metus faucibus venenatis. Donec im.</div>
        </div>

        <p style="clear: both;margin-left:40px">This is my paragraph</p>
</div>

现场示例在这里

于 2013-05-22T17:15:14.430 回答
0

看起来你有绝对定位和浮动：没有“清晰”的邪恶二重奏。这意味着您与这两个孩子的第一个孩子 div 将没有任何高度。我建议从这些 div 中删除 position:absolute 和 float:left ，改用：

display:inline-block;
vertical-align:top;

这将允许它们向左 -> 向右流动，并在页面流中具有高度。

于 2013-05-22T17:15:23.217 回答
0

如果您使用浮点数，为什么要将它与绝对位置混合？

我已经改变了一点。

<div style="float:left;width:40px;">57</div>
        <div style="width:550px;float:left;margin-left:40px;">

试试这个。顺便说一句，我也添加了 clearfix 方法，因为建议您在不再浮动任何内容时清除浮动空间。

如果您不想要它们，可以使用 .clearfix 和 CSS 删除 div。

干得好。

于 2013-05-22T17:15:28.133 回答