Как выровнять кнопки справа внизу панели

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

Может быть, вы можете сделать что-то, используя 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. Я изменил свойство height, которое вы имели в .mainBody, на min-heightпотому что, как я понял ваш вопрос, высота тела является переменной, и в противном случае компонент не будет расти вместе с содержимым, но если это не так, вы можете легко изменить его обратно.

2. С тем же намерением я переместил padding к содержимому вашего компонента.

3. Я добавил несколько кнопок для кнопок, чтобы избежать ихнаходясь прямо на линии и касаясь друг друга, но вы можете изменить это.
4. Я сгруппировал кнопки в один .buttonsContainer div, чтобы выполнить выравнивание кнопок в одном месте вместодублируя его в каждой из кнопок.
5. Я удалил top и position из кнопок, так как они не нужны в примере, показанном с помощью flex, но вы должны отрегулировать точное расположение кнопок, как вам нравится, с помощью padding и/ или margin.

Answer 2

Ну, вам нужно позиционировать .previousButton и .nextButton как абсолютные. Так как .mainBody является относительным, элемент с позицией: absolute;позиционируется относительно ближайшего предка.

    .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

Добавьте эти строки в .mainBody

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