行网格垂直定位

Question

我有这样的看法：

​

我的密码是：

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

如果要移动“票务关闭框”和“总票箱”下的“倒班指示框”用户，应怎么办？

帮帮我伙计们谢谢..。

Answer 1

您可以将一个布局嵌套到另一个布局中，将两列嵌套为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>

Answer 2

为了达到预期的效果，使用下面的选项使用类xl-12表示“用户在Shif上”div，并将其移动到“票证关闭计数”和“总票证”以下。

​

<div class="row">
  <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-12" style="height: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>
    <!-- <eds-gauge [settings]="gaugeScore"></eds-gauge> -->
  </div>
  <div eds-tile class="xl-8" style="height: 400px">
    <eds-tile-title>User on Shift Indicator</eds-tile-title>
  </div>
</div>

​