Question

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

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

a preview (easier to open in IE this way)

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;
}

现在我不明白两件事

float元素会发生什么？盒子永远不会太小，实际上相邻div的边距大于ul div的宽度。但是当窗口足够小时，浮动元素似乎浮动到窗口边缘而不是其容器边缘，但是如果在窗口较小时向右滚动一点，您将看到容器足够宽。
不太重要的问题为什么这么宽？它不应该像它的内容一样宽吗？

我提出的唯一解决方法是给我的绝对div宽度，但是有问题。它应该调整内容，如果浮动div附近有图片。

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

Answer 1

Internet Explorer存在div和浮点数问题，尤其是旧版本的IE。每当我遇到浮动和div没有正确清理的问题时，我依赖于Clearfix方法。

将clearfix css添加到主css文件中，然后将类.clearfix附加到.container，使其看起来像<div class="container clearfix">。

对于内部的2个div，如果你希望这2个div的宽度根据其中的内容改变，则取下它们的边距和宽度。向左浮动一个div，然后向右浮动另一个div。

你会看到Clearfix强制父div（.container）在里面的浮动元素周围包裹。

希望这有帮助！

绝对定位任意宽度div中的浮点错误

1 个答案: