css 的响应式 div 宽度和高度

Question

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

<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; 属性来实现这一点，它确实有效，但浏览器似乎不会在调整大小时重新计算块宽度？

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

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

一开始所有图片的位置都很好，我可以水平滚动：完美。
然后我调整浏览器大小
图像正在调整大小，而不是 .item 包装器。出现白色间隙:(

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

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

谢谢！

Answer 1

检查它是否是您想要的？

我用 border:solid 1px 红色管理你的 classes；并在某些 class 中使用 width:100%。

也在class项中：

width:100%;

https://jsfiddle.net/g597w3Lr/6/

Answer 2

Original answer

编辑 2： 看了你的视频，我认为新方法就是你要找的。

您必须将 divs 和 .item class 显示为 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 的元素就像一个块，但您可以将其设置为内联（在同一行中）。这意味着您可以在一行中设置 div（默认为 display: block）。也可以看看here:

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

此外，inline 元素无法获得 height/width 属性，因此这就是为什么当您将 divs 与 .item class 显示为 inline，它们包装了内容，但没有得到它们应该对应的 height/width（在你的情况下，来自它们的 parents，就像你把它们放在 % 中一样）。

如果您将它们显示为 inline-block，则不会更改它们的默认 height/width 属性。只允许您在一行中显示它们。

JSFiddle 以查看三个 div（默认为 inline/ inline-block / block）。

Answer 3

您需要稍微修改您的 css

HTML

<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>

CSS

html,body {
  height:auto;
}

.container {
  display: inline-block;
  white-space: nowrap;
  height:auto;
}

.item {
  display: inline-block;
  white-space: normal;
}

.item img {
  width:100%;
  height:100%;
}

Fiddle

css 的响应式 div 宽度和高度

Responsive divs width and height with css

css

layout

resize

horizontal-scrolling

解释：