как сделать разные компоненты рядом друг с другом в angular?

Question

Я определил 3 разных компонента. dummy1, dummy2 и таблица. Пустышка 1 и пустышка 2 имеют только один тег span, как показано ниже, а компонент таблицы имеет визуализируемую таблицу. Мое требование состоит в том, чтобы эти 3 были в горизонтальном положении, а не падали ниже друг друга. Для двух фиктивных компонентов я использовал span, а они рядом друг с другом, но компонент таблицы падает ниже.

МОЙ app.component. html

<app-headtoolbar></app-headtoolbar>
<app-dummy1 class="comp1"></app-dummy1>
<app-dummy2 class="comp2"></app-dummy2>
<span><app-table class="blk3"></app-table></span>

Answer 1

Вы можете просто выровнять элементы в одной строке, используя макет Flex. Просто добавьте все три элемента в контейнер и используйте следующий CSS для выравнивания.

.container {
  display: flex;
  justify-content: space-between;
}

Я добавил рабочий фрагмент ниже:

.container {
  display: flex;
  justify-content: space-between;
}

.comp1, .comp2, .comp3 {
  border: 1px solid black;
  flex-grow: 1;
}

<div class="container">
  <div class="comp1">dummy1</div>
  <div class="comp2">dummy 2</div>
  <div class="comp3">table</div>
</div>

Я только что показал вам, как можно размещать компоненты рядом друг с другом. Вы можете изменить ширину компонентов в соответствии с вашими потребностями. Вы также можете создать экземпляр stackblitz и поделиться со мной здесь, если вам нужна дополнительная помощь

Вы можете изучить основы гибкого программирования здесь: https://www.w3schools.com/css/css3_flexbox.asp