网格并排显示两个网格

网格并排显示两个网格

本文介绍了如何使用 Angular 6 -Ag 网格并排显示两个网格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图并排放置两个网格,但第二个网格会自动移到下一行.

我已将每个网格的宽度减少到 40%,并且还尝试将网格放置在 中,但我仍然无法显示彼此并排的网格.

解决方案

使用 flexbox 应该可以解决您的问题:

.row {显示:弹性;}.柱子 {弹性:50%;填充:10px;高度:500px;}<div class="row"><div class="column"><ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>

<div class="column"><ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>

I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.

I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.

解决方案

Using flexbox should solve your problem:

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 10px;
  height: 500px;
}

<div class="row">
  <div class="column">
    <ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
  <div class="column">
    <ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
</div>

这篇关于如何使用 Angular 6 -Ag 网格并排显示两个网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 01:09