我在我的 Angular html 表单中使用网格。网格如下:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2%;
grid-auto-rows: 90%;
}
此网格将平行排列两个矩形。现在我有一些 div,它们将在这些矩形上显示数据,每个矩形底部都有一个按钮。但是当一个或另一个 div 没有要显示的数据时,我的按钮会向上移动网格。我希望这些按钮位于网格底部的固定位置,并且当按钮上方的 div 不显示数据时不要向上移动。我该怎么做。
最佳答案
要在没有数据显示时让按钮保持在底部,应将插入按钮的元素的display
属性设置为flex
,并将margin-top
按钮的 auto
。
您还必须删除 .grid
类的 grid-auto-rows: 90%;
或至少将其设置为自动。这会导致您的网格无法随内容正常增长。
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#Values
HTML:
<div class="grid">
<div class="cell">
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<button class="button">My Button 1</button>
</div>
<div class="cell">
<button class="button">My Button 2</button>
</div>
</div>
CSS:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2%;
grid-auto-rows: auto;
}
.cell {
display: flex;
flex-direction: column;
}
.button {
margin-top: auto;
height: 40px;
padding: 10px;
width: 200px;
}
.cell
是插入按钮和内容的元素。
请参阅此处的工作示例:https://codepen.io/bosoria/pen/MWgdVej
关于html - 在固定位置显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58153450/