css - 绝对定位的任意宽度div中的 float 错误

Question

再次出现 IE 浏览器版本 6 和 7 的问题

立即查看示例，尝试调整窗口大小等。

a preview (easier to open in IE this way)

code

HTML:

<div class="container">
    <div class="left-menu">
        <ul>
            <li>El1</li>
            <li>Element 2</li>
            <li>3</li>
        </ul>
    </div>
    <div style="margin-right: 60px;">Тест Тест</div>
</div>

CSS:

.container{
    position:absolute;
    top:100px;
    left:100px;

    outline: 1px solid red;
    background-color:pink;
}
.left-menu{
    outline: 1px solid green;
    background-color:#AAA;

    width: 50px;
    float: right;
}

现在我不明白2件事

1. float 元素会怎样？盒子永远不会太小，事实上，相邻 div 的边距大于 ul div 的宽度。但是当窗口足够小时， float 元素似乎 float 到窗口边缘而不是它的容器边缘，但是如果你在窗口小的时候向右滚动一点，你会看到容器足够宽。

2. 不太重要的问题为什么这么宽？它不应该和它的内容一样宽吗？

我想出的唯一解决办法是给我的绝对 div 一个宽度，但问题来了。如果 float div 附近有图片，它应该根据内容调整大小。

并且会有一张图片 =) 这种宽度解决方法当然允许使用大量的 javascript，以调整比示例中显示的更复杂结构中的每个元素的大小，但我想知道是否可以使用 css 代替？

Answer 1

Internet Explorer 存在 div 和 float 的问题，尤其是旧版本的 IE。每当我遇到 float 和 div 无法正确相互清除的问题时，我都会依赖 Clearfix方法。

将 clearfix css 添加到您的主 css 文件，然后附加类 .clearfix .container 所以它看起来像 <div class="container clearfix"> .

对于里面的 2 个 div，如果你想让这 2 个 div 的宽度根据它们里面的内容而改变，那么去掉它们的边距和宽度。向左浮动一个 div，向右浮动另一个 div。

您会看到 Clearfix 强制父 div (.container) 将 float 元素包裹起来。

希望这对您有所帮助!