Question

HTML

<div class="container"> 
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item this-item-shifted-down">
    one line
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
</div>

和CSS

.item {
  height:100px;
  width:100px;
  background:pink;
  margin:5px;
  display:inline-block;
  white-space:normal;
}
.container {
  white-space:nowrap;
}

有一个容器，其中包含许多物品，应该在一行中显示，并且能够超出容器的边界。

当我使用white-space:nowrap;作为容器而white-space:normal作为商品时，商品会与底线对齐。

如何将项目对齐到顶部而不是文本的底线，并保存能够进入边界的能力？这可以在没有JavaScript的情况下实现吗？我在stackoverflow上发现了一些类似的问题，但它们并没有解决我的问题。

Answer 1

在您的情况下，每个内联块元素中的文本与前一个框的基线对齐。因此，如果文本量变化，则对齐也会变化。这是因为vertical-align属性的默认值为baseline。

以下是有关此行为的规范的相关引用：

10.8 Line height calculations: the line-height and vertical-align properties

inline-block的基线是正常流程中其最后一个行框的基线，除非它没有流入的行框或者其overflow属性的计算值不是visible，在这种情况下，基线是下边距边缘。

因此，您只需将vertical-align: top添加到内联块元素中，即可纠正您所看到的对齐问题：

Updated Example

.item {
  height: 100px;
  width: 100px;
  background: pink;
  margin: 5px;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

使用空格CSS属性

1 个答案: