如何在3个块中更改页面HTML？

Question

嘿，我想这样设置HTML样式：

我目前有这个：

<app-list-employees></app-list-employees>
<app-book-employee></app-book-employee>
<app-calendar-books></app-calendar-books>

如果您有解决方案，我也会使用Bootstrap。我的styles.scss文件为空。

编辑： 我在一些组件周围有一些DIV：

<div class="row text-center">

在列表雇员组件中，或

<div class="panel panel-primary">

和

<form class="form-horizontal" [formGroup]="deviceForm" (ngSubmit)="onSubmit()">

在CreateEmployee组件中。

Answer 1

您可以利用正在使用的Bootstrap。

<div class="row">
  <div class="col-6">
    <app-list-employees></app-list-employees>
  </div>
  <div class="col-6">
    <div><app-book-employee></app-book-employee></div>
    <div><app-calendar-books></app-calendar-books></div>
  </div>
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-6">
    Employee List
  </div>
  <div class="col-6">
    <div>Book Employee</div>
    <div>Calendar Books</div>
  </div>
</div>

如果您希望行的高度相等，请使用.row-eq-height

Answer 2

您可以像这样使用Angular Flex Layout：

<div>
    <div fxFlex="row">
        <div style="background:red" fxFlex="column">List employees</div>
        <div fxFlex="column">
            <div style="background:yellow">Book Employee</div>
            <div style="background:green">Calendar Book</div>
        </div>
    </div>
</div>

Answer 3

<div class="row">
  <div class="col-6">
    <app-list-employees></app-list-employees>
  </div>
  <div class="col-6">
    <div class="row">
      <div class="col-6">
        <app-book-employee></app-book-employee>
      </div>
      <div class="col-6">
        <app-calendar-books></app-calendar-books>
      </div>
    </div>
  </div>
</div>