Question

我试图将页脚放在两个弹性框下（右侧和左侧）。但我的代码无法正常工作。我的代码中有什么问题。

#all{
    position: absolute;
    width: 55%;
    margin: 0 auto;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
}

#left{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#right{
    width: 20%;
}

footer{
    width: 100%;
    display: block;
    clear: both;
    text-align: center;
}

我的HTML摘要如下;

<body>
    <div id="header">
    </div>

    <div id="all">
        <div id="left">
        </div>

        <div id="right">
        </div>
    </div>
    <footer>some words</footer>
</body>

Answer 1

这与弹性框无关。 footer未显示在2个flexbox（#all）下，因为#all的位置为absolute，这使其与页面流分离。要在footer下显示#all，您需要删除absolute代码。

我为您的代码示例制作了fiddle，请检查。

有关absolute和页面flow的详情，请查看MDN：

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元素从流动中取出，因此在放置其他元素时不会占用空间。

如何在flexboxes下放置一个元素？

1 个答案: