使用nowrap和内联块

Question

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

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>

如您所见，文本窗格具有最大宽度，而不是固定宽度。这会导致容器缩小一点。如果在文本窗格中指定固定宽度，则容器正确地包裹子窗格：

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>

这是预期的行为吗？有没有办法让容器正确地环绕子窗格而不必在文本窗格中指定固定的宽度？

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>