Question

我正在尝试做类似的事情：

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
| |       | text text text text text text  |
| |       | text text text text text text  |
| --------- text text text text text text  |
| text text text text text text text text  |
| text text text text text text text text  |
--------------------------------------------

标记应该是正确的：

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
</div>

问题是 - 如果只有少量文本，图像将从容器div“浮出”，看起来像这样：

--------------------------------------------
| --------- text text text text text text  |
| | image | text text text text text text  |
|_|       |________________________________|
  |       |
  ---------

要解决此问题的任何想法？我唯一的解决方案似乎是设置div容器的最小高度。 THX

Answer 1

div {
    overflow: hidden;  /* except IE6 */
    display: inline-block; /* IE6 */
}
div {
    display: block; /* IE6 */
}

Answer 2

使用div在style="clear:both;元素的末尾添加一个空元素，如下所示：

<div>
    <img src='myimage.jpg' style='float:left;'>
    tex text text ..
    <div style="clear:both;"></div>
</div>

Answer 3

＆lt; div style =“overflow：auto”＆gt; ＆LT; / DIV＆GT;

css：浮动图像到左边 - 问题

3 个答案: