html - 使用 nowrap 和 inline-block 的水平滚动

Question

我正在使用 white-space: nowrap 和 display: inline-block 开发水平滚动画廊。图库由一系列图像 Pane 和位于容器末端的文本 Pane 组成。你可以在这里看一个例子:

https://jsfiddle.net/zcf0va58/3/

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid red;
}
.post-image {
  display: inline-block;
  vertical-align: top;
}
.post-text {
  display: inline-block;
  vertical-align: top;
  max-width: 100px;
  width: 100%;
  white-space: normal;
}

<div class="container">
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-text">
    <div>
      some text some text some text some text some text some text some text
    </div>
  </div>
</div>

如您所见，文本 Pane 具有最大宽度，而不是固定宽度。这会导致容器收缩一点。如果在文本 Pane 中指定固定宽度，则容器会正确环绕子 Pane :

https://jsfiddle.net/zcf0va58/4/

.container {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid red;
}
.post-image {
  display: inline-block;
  vertical-align: top;
}
.post-text {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  white-space: normal;
}

<div class="container">
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-image">
    <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />
  </div>
  <div class="post-text">
    <div>
      some text some text some text some text some text some text some text
    </div>
  </div>
</div>

这是预期的行为吗？有没有办法让容器正确环绕子 Pane ，而无需在文本 Pane 中指定固定宽度？

Answer 1

看起来问题是因为同时使用了 white-space 和 max-width 值。您可以尝试使用 flexbox，因为它不需要为这种布局使用 white-space: nowrap;。

jsFiddle

.container {
  display: inline-flex;
  border: 1px solid red;
}
.post-image {
  flex-shrink: 0;
}
.post-text {
  max-width: 100px;
}

<div class="container">
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-text">
    <div>
      some text some text some text some text some text some text some text
    </div>
  </div>
</div>

如果需要在旧版浏览器上运行，您也可以尝试使用 CSS 表格布局。

jsFiddle

.container {
  display: inline-table;
  border: 1px solid red;
}
.post-image, .post-text {
  display: table-cell;
  vertical-align: top;
}
.post-text {
  max-width: 100px;
}

<div class="container">
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/ccc">
  </div>
  <div class="post-image">
    <img src="//dummyimage.com/100/999">
  </div>
  <div class="post-text">
    <div>
      some text some text some text some text some text some text some text
    </div>
  </div>
</div>