布局:需要一个可以比同一行中其他单元格更大的单元格

时间:2018-08-03 21:19:23

标签: html css angular

解释我要执行的操作的最佳方法是使用此图像: Desired Output <\ b>

我现在得到的是: current output

几乎可以将其视为具有两列的7行数据。问题在于,在第1行的单元格2中,控件的大小必须与5行相同,但当前其高度仅为1行。它的高度应从字段x一直到标签E。

这是其中一行的示例代码,因此您可以看到我只是在使用两个不同的div类,一个称为“ row-two”,另一个用于列,在这种情况下为“ col-1” -12“。 “第二行”和“ col-1-12”经常重复使用。

<div class="row-two" >
      <label for="someLabel" class="col-1-12">TheLabel:</label>
      <div class="col-2-12 left-align-button">
          <p-dropdown [options]="optionNames" [(ngModel)]="selectedSomething" [filter]="true" filterBy="label" [style]="{width:'80%'}" (onChange) = "onSomeChange()"></p-dropdown>
      </div>
      <label for="somethingElse" class="col-1-12">AnotherLabel:</label>
      <div class="col-3-12">
          <select multiple="true" size="12" [(ngModel)]="selectedSomething" style="width: 100%;" (ngModelChange) = "getDatesFromServer()" >

          <option title="{{something.label}}" *ngFor="let something of somethings" value= {{something.value.id}}>
            {{something.label}}
          </option>
      </select>
  </div>

1 个答案:

答案 0 :(得分:0)

致Jensei:答案是CSS Grid。这里的示例基本上将是我的解决方案:https://gridbyexample.com/examples/example20/