Question

这让我疯了......

<!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" >
<head>
    <title></title>
    <style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { float: left; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text {  }
    </style>
</head>
<body>
    <div class="cantWrapper">
        <div class="floatedDiv"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
    </div>
</body>
</html>

在所有其他浏览器中，文本浮动在蓝色框之后。然而，在IE6中（有些可预见），文本会落在蓝框下方。

......我找不到答案。文本无法换行，因此是现在。

- 随机添加此项会使蓝框完全消失

Answer 1

此行为的原因是.wrapper .text没有设置宽度，并且它也不浮动。因此，它将假定100％宽度，如DIV默认情况下那样，当它使用其容器宽度的100％时，它不能适合蓝色框旁边，但会立即显示在蓝色框下方。要解决此问题，您需要设置everything-16px的宽度，或者需要将float: left设置为.text DIV。

后一种解决方案更方便，因为它不需要设置固定宽度，但它确实需要您添加清除DIV作为.wrapper的最后一个子项，或者内容不会在其中分配任何空间容器：

<div class="wrapper">
    <div class="floatedDiv"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>

    <div style="clear: both;"></div>
</div>

Answer 2

您的<div class="text">需要设置宽度设置。

Answer 3

尝试解决方案（但它不会验证并且不漂亮）：

对于IE6：

<style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { display: inline; zoom: 1; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { display: inline; }
    </style>

对于非IE：

<style type="text/css">
        .cantWrapper { white-space: nowrap; }
        .cantWrapper .floatedDiv { display: inline-block; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { display: inline; }
    </style>

Answer 4

啊哈，我们找到了答案：感谢所有帮助过的人，感谢Rosie。

<!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" >
<head>
    <title></title>
    <style type="text/css">
        .cantWrapper { position: relative; width: 100%; clear: left; white-space: nowrap; }
        .cantWrapper .floatedDiv { float: left; display: inline; background-color: Blue; height: 16px; width: 16px;}
        .cantWrapper .text { position: absolute; top: 0; }
    </style>
</head>
<body>
    <div class="cantWrapper">
        <div class="floatedDiv"></div>
        <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
    </div>
</body>
</html>

IE6 nowrap和浮动问题

4 个答案: