Question

我在div内的文本有问题，每当添加浮动图像时div的文本就会一直向下移动。

这是html代码：

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
Lorem ipsum 
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel- Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
Lorem ipsum....
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right; clear: right;">
Lorem ipsum...
</div>

和CSS：

.clearfix::after {
content: "";
clear: both;
display: table;
}

这是一个jsfiddle。一切正常的地方： http://jsfiddle.net/bnspz9j2/`

但是当我实现代码时，每当我添加一个浮动div时，文本就会一直向下移动。这是问题的图片。第一个框中的文本很好，添加浮动图像时向下移动，添加另一个浮动图像时向下移动：http://oi64.tinypic.com/vr3ksk.jpg

我不知道问题是什么，这让我发疯。任何帮助将不胜感激！

Answer 1

Sarah，如果它在jsfiddle中运行而不在您的实现中运行，则它可能是一个重置文件。你有什么？

因为即使我在stackoverflow片段中在此处运行它，它也能正常工作。

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

<p></p>

<div class="clearfix" style="border: 3px solid #4CAF50; padding: 5px;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right;">
<img src="https://campingannie.com/wp-content/uploads/2014/01/wenzel-Alpine8Dome1.jpg" alt="GENERIC PIC" style="width: 200px; height: auto; float: right; clear: right;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

当我添加浮动图片时，我的文字不是放在方框顶部

1 个答案: