我如何防止DIV重叠右浮动图像？ [英] How can I prevent DIVs from overlapping a right floated image?

问题描述

我有一张带有两张图片和一些文字的文档。第一张图像向左浮动，第二张向右浮动。

问题是来自DIV的文字与第二张图像重叠。 第二张图片之后的第一个DIV文本应放置在第一张图片的下方，并放在第二张图片的左侧（因为它位于第二张图片的后面 IMG 标签）。我缺少什么？

小提琴：

更新：

由于您尚未分配任何类别对这些元素，我将内联样式添加到这些特殊元素。

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

I have a document with two images and some text. The first image is floated left, the second one floated right.

The problem is that text from DIVs overlaps the second image. The text "First DIV after second image" should be placed below the first image and to the left of the second image (since it's after the second IMG tag). What am I missing?

Fiddle: 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>

解决方案

You need to give all the Child elements display:inline and give other special elements display: block. and also most important thing is to give overflow: auto to the parent element so that it counts the height of the floated child elements (such as the second image).

Here is the working fiddle

Update:

As you have not assigned any classes to those elements, I am adding inline styling to those special elements.

Updated Fiddle (Change as you need)

这篇关于我如何防止DIV重叠右浮动图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！