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/

注释

我将height中的.mainBody属性修改为 min-height，因为据我了解，您的问题是高度是可变的，否则组件将不会随内容，但如果不是这样，您可以将其改回容易。
出于同样的意图，我将padding移到了您的组件。
我在按钮上添加了一些填充，以防止它们正好位于线上并彼此接触，但是您可能需要更改它。
我将按钮分组在一个.buttonsContainer div中，以将按钮对齐在一个位置，而不是在每个按钮中都进行复制。
我从按钮上删除了top和position，因为在使用flex的示例中它们是不必要的，但是您应该根据需要使用{{1 }}和/或padding。

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

4 个答案:

注释