Question

可能重复：
Div is shown in wrong position

我有这样的代码：

<div style="position:relative">
    <div style="float:left; width: 183px; background-color:#c1cba9; color: #000000;"><img border="0" alt="Product categories" title="Product categories" src="graphic/categrieshead.png" width="179" height="43"><br />
        <div style="margin-left: 10;">Links goes here</div><br />
        <img border="0" src="graphic/catbot.png" width="179" height="17"></div>
    <div style="float:left; width: 480px; height:100px; text-align: center;"><img border="0" src="graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">asasasas</div></div>
    <div style="float:left; width: 322px; height:100px; text-align: center;">
        <div style="width: 300px; color: #ffffff; background-color:#6b8861; font-size : 34px;">Item title</div>
        <div style="width: 300px; color: #ffffff; background-color:#6b8861;"><div style="width: 296px; margin: 2 2 2 2; background-color:#ffffff;">Item picture</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
        <div style="width: 300px; color: #801010; font-size : 60px;">Price: 20£</div>
    </div>
</div>

我需要添加内容（文本）将出现在这三个div下面的div，但是通过简单地添加文本就不会出现在正确的位置（在右边的边界之外），我怎么能在我提到的部分之后添加div它会在预览下出现在那个部分吗？

Answer 1

在浮动元素后使用clear:both;的元素：

<div style="clear: both;"></div>

在此之后，您可以插入新的内容div，它将低于其他内容。

Answer 2

如果我理解正确的问题，你必须添加新div的CSS clear:both。

Div内容未显示在正确的位置，因为在div之前有位置：relative

2 个答案: