Question

只是寻找一个好的解释，以便我理解为什么会发生这种情况，以便将来我能正确理解。一切都很好，除了正确的课程是正确的。我不明白的是因为标题位置是固定的，为什么它会在它之上/之下？基本上是什么定位使它能够很好地适应应有的位置？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>

    <div id="header"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div id="footer"></div>

    </body>
</html>

CSS：

#header {
    border-radius: 5px;
    height: 60px;
    width: 500px;
    background-color: red;
    position: fixed;
    z-index: 1;
}

.left {
    border-radius: 5px;
    height: 500px;
    width: 70px;
    background-color: blue;
    float: left;
}

.right {
    border-radius: 5px;
    height: 500px;
    width: 430px;
    background-color: black;
    float: right;
    position: relative;

}

#footer {
    border-radius: 5px;
    height: 60px;
    width: 500px;
    background-color: red;
    clear: both;
}

Answer 1

它必须是float:left而不是float:right，否则它将占用容器（在本例中为正文）以将其自身调整到右侧。否则，您可以将宽度增加到100％。

请检查：http://jsfiddle.net/abhitalks/K6fXE/

.right {
    float: left;
    ...
}

有人可以解释为什么我的右派会突然冒出来吗？

1 个答案: