【问题标题】：Responsive divs width and height with css带有css的响应式div宽度和高度
【发布时间】：2016-08-30 02:08:05
【问题描述】：

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

<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 包装器。出现白色间隙:(

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

有什么办法可以克服吗？

谢谢！

【问题讨论】：

抱歉，我无法理解您的问题。虽然你的第一张图片的宽度是 200 像素，但如果你重新调整浏览器的大小，它会根据浏览器而改变。这是您要解决的问题吗？尽管浏览器大小，您是否期望它为 200 像素？请澄清。
如果您水平调整浏览器大小，您会看到图像调整大小但看不到它的包装块（.item）？（在 chrome/firefox 上）
@skiplecariboo 我认为这就是您在调整大小时清除空白的结果，jsfiddle.net/g597w3Lr/9

标签： css layout resize horizontal-scrolling

【解决方案1】：

检查一下，这就是你想要的吗？

我用边框管理你的课程：solid 1px red; 并在某些类中使用 width:100%。

也在类项目中：

width:100%;

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

【讨论】：

谢谢，不幸的是 .item 元素不一定具有相同的宽度，我想使用不同比例的图像。在您的示例中，图像被拉伸：-/
@skiplecariboo 你总是有相同的图像，相同的尺寸吗？如果我们响应所有 div，一些图像会拉伸。而且看起来不太好。
布局应该接受不同尺寸的不同图像。它们的大小由应始终适合浏览器高度的高度驱动。宽度是免费的。没有拉伸。

【解决方案2】：

Original answer

编辑 2： 看看您的视频，我认为您正在寻找新方法。

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

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

Updated JSFiddle.

说明：

我不是CSS 的专家，所以如果有人看到一些错误，请纠正我。

当您将元素显示为inline-block 时，official documentation 表示：

内联块

使元素生成内联级块容器。 inline-block 内部被格式化为块框，元素本身被格式化为原子内联框。

这意味着您显示为inline-block 的元素就像一个块，但您可以将其设置为内联（在同一行中）。这意味着您可以在一行中设置一个 div（默认为 display: block）。也可以看here：

div元素，divide的缩写，是块级的通用容器。

此外，inline 元素无法获得 height/width 属性，因此这就是为什么当您将 divs 与 .item 类显示为 inline 时，它们会包装内容但无法获得 height/width他们应该对应于采取（在你的情况下来自他们的父母，因为你把他们放在%中）。

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

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

【讨论】：

我实际上希望项目溢出以创建水平滚动布局。我的问题是当浏览器垂直调整大小时，项目宽度没有正确调整大小。
@skiplecariboo 项目宽度没有正确调整大小到底是什么意思？
感谢您的帮助 :) 我的意思是图像正在调整大小，但包装器（.item 类）不会调整大小。您可以看到图像之间的白色间隙。我用视频截图更新了我的问题，希望对您有所帮助！
@skiplecariboo 所以你想要的是包装器也调整大小？
就是这样！感谢@Error404，.item 块现在可以正确调整大小。我会深入检查，给你赏金。我也很抱歉，我意识到我没有很好地解释我的问题..

【解决方案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

【讨论】：