Question

我调整了50％的div，但之后的div仍显示在他们的位置上。

.banner-action-card {
  border-radius: 5px;
  transform: translate(0, -50%);
}

<mat-card class="banner-action-card" fxShow.lt-sm="true" fxHide>
  <div fxLayout="column" fxLayoutAlign="center center">
    <h2 fxFlexAlign="center" >Abc abc abc
    </h2>
    <a class="c-link foreground-color-blue">Select</a>
  </div>
</mat-card>
<nav fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap 
       class="dashboard-nav" ngClass.xs="dashboard-nav-xs">
</nav>

translate（0，-50％）非常棒，因为即使在响应式设计中它也能很好地保持div对齐，但是如何在它之后移动div来显示它们之间没有任何间隙。

使用html和css更新了问题。我希望导航元素在我的横幅动作卡向上移动时也会向上移动。

Answer 1

我写了一个小指令来处理这个问题。也许有人可以从中受益。所以现在转换：css中不需要translate（0，-50％）。这是指令：

@Directive({
  selector: '[appTranslateY]'
})
// sets the top margin to move an element up
export class TranslateYDirective implements OnInit {
  @HostBinding('style.marginTop.px')
  marginTop: number;
  constructor(private el: ElementRef) {
    }
    ngOnInit() {
      this.marginTop = -(this.el.nativeElement.offsetHeight / 2);
    }
  }

在位置转换的div之后调整div

1 个答案: