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

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>

我想在mainBody的右下角对齐nextButton和previousButton。问题是我不能使用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 中的 heightproperty 修改为 min-height，因为我理解你的问题，身体的 高度是可变的，否则，组件不会随着 内容，但如果这不是意图，您可以将其更改回来 容易地。

2. 出于同样的目的，我将padding移动到了 你的组件。

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