2

我有一个包含两个图像和一些文本的文档。第一个图像向左浮动，第二个图像向右浮动。

问题是 DIV 中的文本与第二个图像重叠。文本“ First DIV after second image ”应该放在第一张图片的下方和第二张图片的左侧（因为它在第二个IMG标签之后）。我错过了什么？

小提琴：http: //jsfiddle.net/yLUnC/4/

示例截图

html:

<div class="wrapper">
    <div>DIV before first image</div>
    <img class="floatLeft" src="http://placehold.it/200x100&text=First+image">
    <div>DIV after first, before second</div>
    <img class="floatRight" src="http://placehold.it/200x100&text=Second+image">
    <div>First DIV after second image</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text overlapping second image, not good</div>
    <div>last DIV</div>
</div>
4

1 回答 1

3

您需要提供所有 Child 元素display:inline并提供其他特殊元素display: block。而且最重要的是给overflow: auto父元素，以便它计算浮动子元素的高度（例如第二个图像）。

这是工作小提琴

更新：

由于您没有为这些元素分配任何类，因此我正在为这些特殊元素添加内联样式。

更新了小提琴（根据需要更改）

于 2013-08-13T13:09:30.527 回答