内联块div不内联

Question

我的组件有列，每一列都有其卡片。

• 外部div是white-space: nowrap和overflow: auto
• 列有固定的大小和display: inline-block

有些事情是这样的：

铬检测工具没有显示任何东西。还有另一列(在我的代码中，它在*ngFor循环之外)消失了。

列上方的空间大小与前几列中的卡数有多大的关系。

我的component.html：

<div class="grid">

    <mat-card *ngFor="let col of columns" class="col">
        <!-- col name -->
        <mat-card-content>
            <div class="card-container">
                <app-item *ngFor="let card of col.cards" [card]="card"></app-item>
            </div>
            <button mat-button>New card</button>
        </mat-card-content>
    </mat-card>

    <div class="col">
        <button mat-button>New column</button>
    </div>

</div>

我的component.css：

.grid {
    white-space: nowrap;
    overflow: auto;
}

mat-card.col {
    padding: 24px 16px;
    width: 300px;
    height: calc(100vh - 112px);
    display: inline-block;
    margin: 0 4px;
}

*关于标题，我不知道如何恰当地描述它。

Answer 1

如果要对齐列的顶部，请添加样式属性vertical-align: top

mat-card.col {
    ...
    vertical-align: top;
}

默认值是vertical-align: baseline。在原始代码中，div相应地对齐。顶部没有对齐，因为内容在每个div中有不同的高度。您可以在下面的代码片段中看到这两种情况。

​

.grid {
  white-space: nowrap;
  overflow: auto;
  margin-top: 8px;
}

div.col {
  padding: 24px 16px;
  width: 100px;
  display: inline-block;
  margin: 0 4px;
  background-color: orange;
  vertical-align: top;
}

div.col1 {
  padding: 24px 16px;
  width: 100px;
  display: inline-block;
  margin: 0 4px;
  background-color: orange;
}

<p>Top alignment</p>
<div class="grid">
  <div class="col">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col">
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col">
    <p>Line</p>
  </div>
</div>

<p>Default alignment</p>
<div class="grid">
  <div class="col1">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col1">
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="col1">
    <p>Line</p>
  </div>
</div>

​