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

Question

I have this CSS code:

  .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>

I want to align the nextButton and previousButton at the bottom right of the mainBody. The problem is that I cannot use margin-top because I am using an expanded component and the content inside mainBody does not have a stable size. Any ideas?

Answer 1

Add this lines to .mainBody

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

Answer 2

Well you need to postion the .previousButton and .nextButton as absolute.Since the .mainBody is relative, an element with position: absolute; is positioned relative to the nearest positioned ancestor.

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

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

Answer 3

Just set the buttonclasses to absolute, and add bottom: 0; right: 0; bottom: 0; right: 0; . And maybe right for the other button a little bit higher.

Answer 4

Maybe you can do something by using flex with the following 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>

With this modified 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;

}

I have the example in the following JSFiddle for you to test: https://jsfiddle.net/9ey35uwt/

---

Notes

1. I modified the height property you had in .mainBody to min-height , because as I understood your question, the body's height is variable, and otherwise, the component wouldn't grow with the content, but if that's not the intention, you can change it back easily.

2. With the same intention, I had the padding moved to the content of your component.

3. I added some padding to the buttons to avoid them being right on the line and touching each other, but you may want to change that.
4. I grouped the buttons together in a single .buttonsContainer div to do the aligning of the buttons in a single place, instead of duplicating it in each of the buttons.
5. I removed the top and position from the buttons, as they are unnecessary in the example shown using flex, but you should adjust the exact positioning of the buttons as you like by using padding and/or margin .