Question

我似乎无法让我的浮动表现得像我期望的那样。我正在尝试创建一个四面板设置，如Windows徽标。问题是，第四个面板与顶行的最后一个块保持齐平。我在IE7中的IIS6中运行它。它在下面的小提琴和IIS7上运行良好，但我无法在IIS6中获得相同的行为。 http://jsfiddle.net/9GCrm/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-right:10px;
    margin-bottom:10px;
    padding:3px;
}
#repedits
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-bottom:10px;
    padding:3px;
}

#mgrslist
{
    background-color:blue;
    height:250px;
    width:300px;
    clear:both;
    float:left;
    margin-right:10px;
    padding:3px;
}
#importdiv
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
    <div id="replist">

    </div>
    <div id="repedits">

    </div>
    <div id="mgrslist">

    </div>
    <div id="importdiv">

    </div>
</div>
</body>
</html>

Answer 1

只需从clear:both;移除#mgrslist，然后将其添加为单独的类，例如：

<div id="admindiv">
    <div id="replist"></div>
    <div id="repedits"></div>
    <div class="clr"></div>
    <div id="mgrslist"></div>
    <div id="importdiv"></div>
</div>

demo here

为什么会这样？因为<div class="clr"></div>会在之前清除所有div的浮点数，但将它添加到类只会{{1}对于那个特定的类而不是那个类之前的pre-div !!

此外，既然存在clear:float pseudo classes和:before，那么最好将它们用于:after浮动。
阅读此主题以更好地理解它： replace the clear:both with pseudo class

CSS Float Alignment不会掉线

1 个答案: