css - 带行的网格垂直定位
问题描述
我的代码:
<div class="row">
<div eds-tile class="xl-4" style="height: 700px">
<eds-tile-title>User on Shift</eds-tile-title>
<!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
</div>
<div eds-tile class="xl-4" style="height: 200px">
<eds-tile-title>Count of Ticket Closed</eds-tile-title>
</div>
<div eds-tile class="xl-4" style="height: 200px">
<eds-tile-title>Total Ticket</eds-tile-title>
</div>
<div eds-tile class="xl-8" style="height: 400px">
<eds-tile-title>User on Shift Indicator</eds-tile-title>
</div>
</div>
如果我想在 Count of Ticket Closed 框和 Total Ticket 框下移动 Shift Indicator 框上的用户,我应该怎么做?
帮帮我,谢谢...
解决方案
您可以将一个布局嵌套到另一个布局中,将两列嵌套为 4/8,然后在 8 列中,您可以将一行填满,另一半/一半。
也许它更简单的代码
<div class="row">
<div eds-tile class="xl-4" style="height: 700px">
<eds-tile-title>User on Shift</eds-tile-title>
<!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
</div>
<div class="xl-8">
<div class="row">
<div eds-tile class="xl-6" style="height: 200px">
<eds-tile-title>Count of Ticket Closed</eds-tile-title>
</div>
<div eds-tile class="xl-6" style="height: 200px">
<eds-tile-title>Total Ticket</eds-tile-title>
</div>
</div>
<div class="row">
<div eds-tile class="xl-12" style="height: 400px">
<eds-tile-title>User on Shift Indicator</eds-tile-title>
</div>
</div>
</div>
</div>
推荐阅读
- python - 缩放图像后如何获得平滑的直方图?
- jenkins - 防止 Jenkins 在引用 Git 存储库更改时开始构建
- javascript - 每 5 秒切换一次类显示规则
- json - Kotlin Retrofit2 以原始 JSON 形式发出请求
- flutter - Flutter:如何使用 showDatePicker 禁用除我的日期之外的所有日期
- google-apps-script - 存在新值时添加新的 Google 工作表行
- google-sheets - 如果单元格值等于或小于数字,则结果值将位于特定单元格中
- c - Printf in unsigned short int 和 unsigned int 使用 %d
- python - Apache Beam 中的 RuntimeValue 提供程序不适用于 fileIO.Matchfiles()
- rpmbuild - 适用于 redhat7 和 redhat8 服务器的 rpm 规范