如何对齐面板右下角的按钮

Question

我有这个CSS代码：

.mainBody {
border: 1px solid rgba(0, 0, 0, 0.87);
width: 895px;
position: relative;
display: inline-block;
padding-bottom: 8rem;
top: 40px;
height: 310px;
}
.label {
display: inline-block;
margin-left: 1%;
position: relative;
bottom: 10px;
float: left;
z-index: 2;
background: white;
}
.dropdown {
padding-left: 1%;
width: 100%;
margin: 1rem 0;
display: flex;
align-items: center;
}
.paragraph {
position: relative;
display: inline-block;
width: 800px;
padding-bottom: 30px;
padding-left: 10px;
}
.expandedLink {
display: flex;
flex-direction: column;
padding: 1rem 10rem;
}
.previousButton {
position: relative;
top: 77px;
float: right;
}
.nextButton {
position: relative;
top: 77px;
float: right;
}
HTML:
<div className="mainBody">
<div className="label"></div>
<div className="dropdown"></div>
<div className="paragraph"></div>
<div className="expandedLink"></div>
<div className="nextButton"></div>
<div className="previousButton"></div>
<div>

我想将 nextButton 和 previousButton 对齐在 mainBody 的右下角。问题是我无法使用 margin-top，因为我使用的是扩展组件，并且 mainBody 中的内容没有稳定的大小。有什么想法吗？

Answer 1

将此行添加到 .mainBody

display: flex;
align-items: flex-end;
justify-content: flex-end;

Answer 2

好吧，你需要将.previousButton和.nextButton定位为绝对的。由于.mainBody是相对的，因此具有位置的元素：绝对;相对于最近定位的祖先进行定位。

.previousButton {
position: relative;
right: 0px;
bottom:0px;
float: right;
}
.nextButton {
position: relative;
right: 0px;
bottom:0px;
float: right;
}

Answer 3

只需将按钮类设置为绝对值，然后添加bottom: 0; right: 0;。也许适合另一个按钮更高一点。

Answer 4

也许你可以通过将flex与以下HTML一起使用来做一些事情：

<div className="mainBody">
<div className="mainBodyContent">
Main Body Content
</div>
<div className="buttonsContainer">
<div className="nextButton">Next</div>
<div className="previousButton">Prev</div>
</div>
</div>

使用此修改后的 CSS：

.mainBody {
border: 1px solid rgba(0, 0, 0, 0.87);
width: 895px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
top: 40px;
min-height: 310px;
}
.mainBodyContent {
padding-bottom: 8rem; 
}
.buttonsContainer {
align-self: flex-end;
display: flex;
flex-direction: row;
}
.previousButton {
padding: 10px;
}
.nextButton {
padding: 10px;
}

我在下面的 JSFiddle 中有一个示例供您测试： https://jsfiddle.net/9ey35uwt/

---

笔记

1. 我将您在.mainBody中的height属性修改为min-height，因为正如我理解你的问题，身体的 高度是可变的，否则，组件不会随 内容，但如果这不是意图，您可以将其更改回来 容易。

2. 出于同样的意图，我把padding移到了 您的组件。

3. 我在按钮中添加了一些填充，以避免它们在线上并相互接触，但您可能想要更改它。
4. 我将按钮分组到一个.buttonsContainerdiv中，以便在一个位置对齐按钮，而不是在每个按钮中复制它。
5. 我从按钮中删除了top和position，因为它们在使用 flex 显示的示例中是不必要的，但您应该使用padding和/或margin根据需要调整按钮的确切位置。