Question

我有这样的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可以看出，My Lorem Ipsum文本与我的段落重叠。我尝试将somme <br />放在我的div和段落之间，但它们仍然重叠。我希望我的段落出现在我的文本之后。有什么帮助吗？

谢谢

Answer 1

你没有使用position：absolute和float。你可以在这种情况下使用float并摆脱位置和相关的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>

尽管如评论所示 - 您应该将其放在样式表中并避免内联声明。它更清洁，更易于维护。

Answer 2

删除您的绝对位置和将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>

Live exemple here

Answer 3

看起来你已经拥有绝对定位和漂浮的邪恶组合：左边没有“清晰”。这意味着你的第一个孩子与这两个孩子没有任何高度。我建议从这些div中删除position：absolute和float：left，而不是：

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

这将允许它们向左流动 - ＆gt;正确并且在页面流中有一个高度。

Answer 4

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

我已经改变了一点。

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

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

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

<强> Here you go.

div重叠段落文本

4 个答案: