浮动图像不会计入DIV宽度，我该如何做呢？ [英] A floated image does not count toward DIV width, how can I make it so?

问题描述

以下代码：

<div>
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

呈现一个带有文本的div容器和左侧的浮动图像。大。其中包括的文本也尽可能扩展div，同时将文本保持在一行（除非另有说明）。但是，对于浮动图像，div容器的宽度不会尽可能地扩大，并且基于图像的宽度过早地对文本进行换行。

Renders a div container with text, and a floated image on the left. Great. The text included therein also expands the div as much as it can while maintaining the text in a single line (unless otherwise writ). However, with a floated image, the width of the div container does not expand as much as it can, and prematurely line-breaks the text based on the width of the image.

也就是说，如果浮动图像宽度为200像素，则div右端的文本200像素将全部碰撞到下一行。就像DIV容器没有看到额外的文本，并且设置动态div宽度太短！

That is, if the floated image is 200 pixels wide, "200 pixels" of text on the right end of the div will all be bumped to the next line. It's as though the DIV container doesn't see the extra text, and sets the dynamic div width too short!

...我真的意识到，是设计，因为图像是浮动的，而不是块/内联元素。 （至少，我认为我的措辞正确...？）

... which, I do realize, is by design, simply because the image is "floated", and is not a block/inline element. (At least, I think I worded that correctly...?)

那么，我怎么能实现我想要的，而不诉诸于（ick ...）

So, how can I achieve what I want without resorting to (ick...) tables?

推荐答案

浮动元素从页面流中删除，不会导致包围元素展开。

Floated elements are removed from the flow of the page and will not cause the enclosing elements to expand.

查看这里。该教程讲述了使用 overflow 属性来封闭浮动元素。

Take a look here. That tutorial talks about enclosing floated elements by using the overflow property.

这篇关于浮动图像不会计入DIV宽度，我该如何做呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！