不均匀的水平滚动div与白色空间：正常

Question

我正在尝试使用其中的各种其他div来制作一个水平滚动的div。

<div class="slider">
    <div class="item">
        <div class="info">
            <h1>Title</h1>
        </div>
    </div>
    <div class="item">
        <div class="info">
            <h1>This is a really long title</h1>
        </div>
    </div>
    <div class="item">
        <div class="info">
            <h1>Title</h1>
        </div>
    </div>
</div>

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

.item {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 150px;
    margin: 10px;
    background: grey;
}

.info {
    position: relative;
    height: 100%;
    color: #fff;
    white-space: normal;    
}

我遇到的问题是每个div都有一个标题，当它设置为white-space: normal且标题是多行时，它会抛弃其他div的对齐。

以下是操作中的问题示例：http://jsfiddle.net/ur16gj3m/

有没有办法解决这个问题？如果我将.info更改为position: absolute，则可行。我宁愿不使用绝对定位。

Answer 1

问题是由内联元素的默认vertical-align: baseline属性引起的。这会导致块与文本的基线对齐。当文章在基线被按下时换行时，这是一个问题。

在vertical-align: top

上设置.item

工作示例

.slider {
  white-space: nowrap;
  overflow: auto;
}
.item {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 150px;
  margin: 10px;
  background: grey;
  vertical-align: top;
}
.info {
  position: relative;
  height: 100%;
  color: #fff;
  white-space: normal;
}

<div class="slider">
  <div class="item">
    <div class="info">
      <h1>Title</h1>
    </div>
  </div>
  <div class="item">
    <div class="info">
      <h1>This is a really long title</h1>
    </div>
  </div>
  <div class="item">
    <div class="info">
      <h1>Title</h1>
    </div>
  </div>
</div>