css - 使用 css 响应式 div 宽度和高度

Question

我正在尝试构建一个由图像 block 组成的水平滚动布局:

<div class="container">
  <div class="item">
     <img src="http://placehold.it/200x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/400x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/300x300">
 </div>
</div>

我使用 display:inline-block 和 white-space: nowrap; 属性来实现这一点，它确实有效，但浏览器似乎不会重新计算 block 宽度调整大小？

查看此处:https://jsfiddle.net/g597w3Lr/2/并尝试调整浏览器大小..

这是一个屏幕截图，可以更好地了解我的问题: https://youtu.be/VxKo4gysc1o

1. 首先，所有图像都定位良好，并且我可以水平滚动:完美。
2. 然后我调整浏览器的大小
3. 正在调整图像大小，而不是 .item 包装器。出现白色间隙:(

基本上我期望与垂直滚动相同的功能，即根据内容大小调整宽度。 其实我根本不明白这里的逻辑..

有什么办法可以克服这个问题吗？

谢谢!

Answer 1

Original answer

<小时/>

编辑2:看着你的视频，我认为新方法正是你正在寻找的。

您必须显示您的divs与 .item类为inline并删除您的 white-space: normal属性。

.item {
  display: inline;
  height:100%;
}

Updated JSFiddle .

说明:

我不是 CSS 的专家因此，如果有人发现一些错误，请纠正我。

当您将元素显示为 inline-block 时作为official documentation说:

• inline-block

Causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

这意味着您显示为 inline-block 的元素其行为类似于一个 block ，但您可以将其设置为内联(在同一行中)。这意味着您可以在一行中设置一个 div(默认为 display: block)。您还可以看到here :

The div element, short for division, is the block level generic container.

此外，inline元素无法获取height/width属性，这就是为什么当您显示 divs 时的原因与 .item类为inline ，他们包装内容但没有得到 height/width他们应该对应于采取(在你的情况下，从他们的 parent 那里，就像你把他们放在 % )。

如果您将它们显示为 inline-block它不会改变默认值 height/width 的任何内容特性。只是允许您将它们显示在一行中。

JSFiddle查看三个 div( inline/inline-block/block ，默认)。