代码之家 › 专栏 › 技术社区 › Julian H. Lam

浮动图像不算在DIV宽度内,我如何才能做到这一点?

css-float html css

Julian H. Lam · 技术社区 · 15 年前

以下代码:

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

使用文本和左侧浮动图像呈现DIV容器。伟大的。其中包含的文本也尽可能地扩展DIV,同时将文本保持在一行中(除非另有说明)。但是,对于浮动图像,DIV容器的宽度不会尽可能地扩大,并且会根据图像的宽度过早地换行文本。

也就是说,如果浮动图像的宽度为200像素,则DIV右端的“200像素”文本都将被缓冲到下一行。好像DIV容器看不到额外的文本,并且将动态DIV宽度设置得太短!

…我确实意识到,这是通过设计实现的,因为图像是“浮动的”,而不是块/内联元素。(至少,我想我说得对……?)

那么,我怎样才能实现我想要的,而不诉诸于(选择…)表格呢?

6 回复 | 直到 13 年前

Vivin Paliath 15 年前

浮动元素将从页面流中移除,不会导致封闭元素展开。

看一看 here . 该教程通过使用 overflow 财产。

Andreas Bonini 15 年前

同时将wrapping DIV向左浮动,它将正确包装内容:

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

这不是一个完美的解决方案,因为浮动包装DIV有明显的副作用,但它是确保DIV正确包装浮动内容的一种可靠方法。

如果浮动DIV会给您带来任何问题,您可以将它包装在另一个DIV中,该DIV将解决该问题。

ozsenegal 15 年前

失败原因:float:left需要明确的宽度

Ben Hoffman 15 年前

这里可以发生很多事情。当我把你的代码放在一个没有其他代码的HTML页面的主体标记中时,它可以正常工作。这可能是因为您的页面类型定义。我的是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

也可能是因为您有一个容器,它迫使这个DIV变短。确保解决此问题的唯一方法是通过设置区域的宽度样式将其强制为特定宽度。将代码所在的DIV标记更改为float:left样式很可能无法解决问题。我检查它只是为了确定我自己和它没有产生你想要的结果。

technophile 15 年前

除了浮动包含的DIV,还可以向包含的DIV添加“width:100%;overflow:hidden;”样式。这将强制它展开以包含浮动的DIV。请参见 here 更多讨论。

JP Silvashy Gautam Rege 15 年前

还应确保元素显示为块:

img#my_element {display:block;}