内联块div不是内联的

Question

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

• 外部div为white-space: nowrap和overflow: auto

• 列的大小已固定，display: inline-block

有些如何变成这样： Chrome检查工具没有显示任何内容。 还有另一列（你在我的代码中，它在*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;
}

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;