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

如果有人有兴趣知道最终答案那么。谢谢大家，sreejithsdev white-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像素的右边距来分隔图像。我将图像设置为不习惯的显示块（我不相信它是必需的）。

2）为了将所有图像放在一行中，我们需要给#parent或#child提供2650px的宽度。我决定将#child设置为2650px，这样我就可以将#parent设置为overflow-x（从而创建滚动区域）。我还必须设置overflow：hidden到#child来修复＆＃34; clearfix＆＃34;发生的问题，因为它的所有孩子都被漂浮了。

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

水平显示图像/块

3 个答案: