CSS 将 4 个分区放在页面底部

问题描述 投票:0回答:1

我正在尝试使用 CSS 在某些内容下方放置 2 个或更多 div 标签。我想保持 div 的顺序并将它们始终显示在页面底部。我无法隐式地设置每个标签的样式,因为我不知道前面有多少个标签,因为它们是动态创建的,所以我希望将 CSS 类/标签应用于每个 div 并让它自动应用于所有标签。

<html>
<head>
    <style>
        .myCssClass {
        }
    </style>
</head>
<body>
    <div class='myCssClass'>My div 1 is above the content below but want it below it.</div>
    <div class='myCssClass'>My div 2 is above the content below but want it below it.</div>
    <div class='myCssClass'>My div 3 is above the content below but want it below it.</div>
    <div class='myCssClass'>My div 4 is above the content below but want it below it.</div>

    <p>My content is below the 'divs' tags above, but I want to place all the div's below this content, in order. But, I won't know up front how many div's there are because they are created dymaically</p>
</body>
</html>

html css
1个回答
0
投票

在 body 中使用

Flex
并在
margin
中使用
myCssClass 
可以解决这个问题:

<head>

<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.content {
flex: 1;
}
.myCssClass {
margin-top: auto;
}
</style>
</head>
© www.soinside.com 2019 - 2024. All rights reserved.