Как я могу изменить мою страницу HTML в 3 блоках?

Question

Эй, я хочу оформить свой HTML-код следующим образом:

В настоящее время у меня есть это:

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

Я также использую Bootstrap, если у вас есть решение с ним. Мой styles.scss файл пуст.

EDIT: У меня есть некоторые 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

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

Answer 3

Вы можете использовать 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>