我正在尝试使用 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>
在 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>