css - 水平显示图像/块

Question

我试图让一个 div 来显示图像/块而不溢出 y 轴但溢出 x 轴。

这是我没有运气的尝试 http://fiddle.jshell.net/VJX3p/1/

Answer 1

将white-space: nowrap;样式应用于子 div 图像将水平对齐

#child {
  position:relative;
  background:#fde;
  width:400px;
  height:300px;
  overflow-x:auto;
  white-space: nowrap;
}

Answer 2

#parent {
  position:relative;
  background:#fd2;
  width:500px;
  height:350px;
  overflow:hidden;
}
#child {
   position:relative;
  white-space:nowrap;
  background:#fde;
  width:400px;
  height:300px;
  overflow-x:auto;
}

如果有人有兴趣知道最终答案，那就这样吧。谢谢大家，sreejithsdevwhite-space: nowrap;是诀窍。

Answer 3

你可以只用 CSS 来解决这个问题。以下代码将使 vid 仅在 x 轴上溢出：

#parent {
  overflow-x: scroll;
}
#child {
  overflow: hidden;
  width: 2650px;
}
img {
  float: left;
  margin-right: 9px;
  display: block;
}

为了更好地解释发生了什么，这是我的思考过程： 1）首先我们将图像浮动到左侧，以便它们彼此相邻排列（仅当有足够的空间时，我们将在稍后设置）。我设置了 9 px 的 margin-right 来分隔图像。我出于习惯将图像设置为显示块（我不认为这是必需的）。

2）为了在一行中获取所有图像，我们需要给#parent 或#child 提供2650px 的宽度。我决定将#child 设置为 2650px，这样我就可以将 #parent 设置为 overflow-x（从而创建滚动区域）。我还必须将 overflow: hidden 设置为 #child 以修复由于所有子项都浮动而发生的“clearfix”问题。

请注意，如果添加图像或更改图像大小，则必须重新计算#child 的宽度值。如果您要动态加载更多图像，则可以通过 javascript 在服务器端或客户端动态执行此操作。