【问题标题】:Layout: Need a cell that can be bigger than other cell in the same row布局:需要一个可以比同一行中的其他单元格更大的单元格
【发布时间】:2018-08-03 21:19:23
【问题描述】:

解释我想要做什么的最佳方式是使用这张图片: Desired Output

我目前得到的是: current output

几乎可以将其视为包含两列的 7 行数据。问题是在第 1 行单元格 2 中,控件需要与 5 行大小相同,但目前它的高度只有 1 行。它的高度应该从字段 x 一直延伸到标签 E。

这是其中一行的示例代码,因此您可以看到我只使用了两个不同的 div 类,一个称为“row-two”,另一个用于列,在本例中为“col-1 -12"。 "row-two" 和 "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>

【问题讨论】:

  • CSS Grid 将拯救你的一天

标签: html css angular


【解决方案1】:

感谢 Jensei:答案是 CSS Grid。这里的这个例子基本上是我的解决方案:https://gridbyexample.com/examples/example20/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-06
    • 1970-01-01
    相关资源
    最近更新 更多