我试图将页脚放在两个 flexboxes 下(右和左)。 但是我的代码不能正常工作。我的代码有问题吗？
#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>
最佳答案
这与 flex box 无关。 footer 没有显示在 2 个 flexboxes (#all) 下，因为 #all 的位置是 absolute，这使其脱离页面流。为了让footer显示在#all下，需要去掉absolute代码。
我做了一个 fiddle对于您的代码示例，请检查。
有关绝对和页面流的更多信息，请查看MDN :
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.
关于html - 如何将元素放在 flexboxes 下？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43359664/