Question

以下代码：

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

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

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

...我确实知道，这只是因为图像是“浮动”的，而不是块/内联元素。（至少，我认为我措辞正确......？）

那么，如何在不诉诸（ick ...）表的情况下实现我想要的目标呢？

Answer 1

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

看看here。该教程讨论了使用overflow属性封装浮动元素。

Answer 2

将包装div浮动到左侧，它将正确包装内容：

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

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

如果浮动div会给你带来任何问题，你可以将它包装在另一个应该解决问题的div中。

Answer 3

失败导致浮动：左边需要明确宽度

Answer 4

这里可以发生许多事情。当我把你的代码放在HTML页面的body标签内而没有其他代码时，它可以正常工作。这可能是因为您的页面类型定义。我的是：

<!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标签，使其具有浮动样式：左侧最有可能无法解决您的问题。我检查它只是为了确保自己，它没有产生你想要的结果。

Answer 5

除了浮动包含div之外，还可以添加“width：100％; overflow：hidden;”样式到包含div。这将强制它扩展以包含浮动的div。有关详细讨论，请参阅here。

Answer 6

您还应该确保元素显示为块：

img#my_element {display:block;}

漂浮的图像不计入DIV宽度，我怎么能这样做？

6 个答案: