Question

所以我只是在玩游戏并尝试创建一个3列布局。我无法让页脚在底部的这两个div侧边栏之间移动。基本上我的中间栏不像我的侧栏那样一直向下，我的中间栏被切断，所以我可以将页脚放在它的正下方，它与我的侧栏对齐。保证金左边是我知道我可以做的事情，但我不想这样做，因为我相信有更好的方法。

这是我到目前为止所拥有的

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

    <div id="first-column"></div>

    <div id="middle-column"></div>

    <div id="third-column"></div>

    <footer></footer>

</body>
</html>

CSS

html, body {
    height: 100%;
    margin: 0;
}

header {
    background-color: #444444;
    width: 100%;
    height: 20%;
}

#first-column {
    width: 15%;
    height: 80%;
    background-color: #d8d8d8;
    float: left;
}

#middle-column {
    width: 70%;
    height: 70%;
    float: left;
    background-color: red;
}

#third-column {
    width: 15%;
    height: 80%;
    background-color: #d8d8d8;
    float: left;
}

footer {
    background-color: #222222;
    height: 10%;
    width: 70%;
    position: absolute;
    bottom: 0;
    margin-left: 100px;
}

Answer 1

有很多方法可以解决这个问题。你可以做的最基本的改变，使这个布局工作：

左边的width设为15%。如果您将页脚的margin-left从100px更改为15%，则会将它们排成一行。

https://jsfiddle.net/7ufL979v/

Answer 2

如果您不想在提及时使用margin-left，则可以将第三列浮动到右侧，您可以像其他框一样浮动页脚（如果您还删除{ {1}}和position: absolute）。

margin-left

您可能还想查看using flexbox，这是一种更现代的解决方法，并且实际上是为了生成布局而构建的，与左右浮动框不同。

Answer 3

你可以简单地将它放在最中间的中间栏中。

如何在两个div之间定位页脚？

3 个答案: