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）；

我在摘要中向书中添加了531像素的最小高度，以确保所有3 177像素的框的空间，并且我删除了转换样式以专注于顶部和高度。因此，我在计算中使用了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>

绝对位置div垂直间距不均匀

1 个答案: