Абсолютная позиция делится неравномерно по вертикали

Question

Абсолютно позиционированные div не распределены равномерно.Я проверял счет снова и снова, но не могу найти ничего плохого в математике.Я знаю, что вы можете сделать это с flexbox, но мне нужно сделать это с абсолютным позиционированием.

HTML:

<section class="book">

            <div class="book__side-edit book__side-edit--1" alt="Burger"></div>
            <div class="book__side-edit book__side-edit--2" alt="Burger"></div>
            <div class="book__side-edit book__side-edit--3" alt="Burger"></div>

        </section>

CSS

.book{
    height: 95.625vh;
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden;

    &__side-edit{
        height: 177px;
        width: 177px;
        position: absolute;
        background-color: blue;

        &--1{
            top: calc( (95.625vh - (177px * 3)) / 3);
            left: 0;
            transform: translateX(-50%);
        }

        &--2{
            top: calc( ( (95.625vh - (177px * 3)) / 3 ) * 2);
            right: 0;
            transform: translateX(50%);
        }

        &--3{
            top: calc( ( (95.625vh - (177px * 3)) / 3 ) * 3);
            left: 0;
            transform: translateX(-50%);
        }
    }

}

Answer 1

Я думаю, вы забыли добавить уже существующие высоты .side-edit.Второй должен иметь + 177px, а третий должен + 354px (или 2 * 177px);

Я добавил минимальную высоту 531px к книге в сниппете, чтобы обеспечить место для всех 3 177pxящики и я убрали стиль перевода, чтобы сосредоточиться на высоте и высотеИз-за этого я использую 100% в расчетах, но думаю, что так будет чище, даже если вы не решите проблему минимальной высоты.

/* 177px * 3 = 531px */

.book {
  height: 95.625vh;
  min-height: 531px;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.book__side-edit {
  height: 177px;
  width: 177px;
  position: absolute;
  background-color: blue;
}



.book__side-edit--1 {
  top: calc( (100% - 531px) * 1 / 3);
  left: 0;
}

.book__side-edit--2 {
  top: calc( (100% - 531px) * 2 / 3 + ( 177px * 1 ) );
  right: 0;
}

.book__side-edit--3 {
  top: calc( (100% - 531px) * 3 / 3 + ( 177px * 2 ) );
  left: 0;
}

<section class="book">

  <div class="book__side-edit book__side-edit--1" alt="Burger"></div>
  <div class="book__side-edit book__side-edit--2" alt="Burger"></div>
  <div class="book__side-edit book__side-edit--3" alt="Burger"></div>

</section>