必须放置在一个水平线上的图像数组（带滚动） [英] Array of images that have to be placed in one horizontal line (with scrolling)

问题描述

我只是设计了一个投资组合网站。我有一个整个数组的图像，我想保持在一行（水平滚动）。这只会发生在我为周围的div（在这种情况下使用类'.post-images'）设置一个固定宽度，宽度足以包含所有图像。如果图像的数量和它们的宽度不是动态的，这可能是很好的。不幸的是这里不是这样。我想要这个div环绕所有的图像，而不是导致他们浮动。我试图设置div的位置，我把每个图像（'.post-image'）到'white-space：nowrap'无效。

I just designed a portfolio website. I have a whole array of images that I want to keep in one line (with horizontal scroll). This only happens when I have set a fixed width for the surrounding div (in this case with class '.post-images'), wide enough to contain all images. This could be just fine if the amount of images and their widths wasn't dynamic. Unfortunately this isn't the case here. I want this div to be wrapping around all images and not causing them to float. I have tried to set the div's where I put each image in ('.post-image') to 'white-space: nowrap' to no avail.

示例：链接

我如何解决这个问题？我希望有人愿意在这里给我一个手）

How can I fix this problem? I hope someone is willing to give me a hand here ;)

谢谢，

Jeroen

推荐答案

替换 .post_images 和 .post_image 与：

.post_images { white-space:nowrap; }
.post_image { display:inline; }

有效地，这使得包装< div class =post_image > 元素冗余（即 display：inline ）;你也可以删除它们。

Effectively, this makes the wrapping <div class="post_image"> elements redundant (that's the display:inline); you may as well remove them.

一般来说，大多数元素的宽度根据其容器的宽度而定;如果你希望一个元素根据内容大小，你需要一个< table> ， display：table 或单行。

In general, most elements size their width according to that of their container; if you wish an element to size according to content, you'll need a <table>, display: table or single line.

编辑 ： white-space：nowrap 和 display：inline 回到IE 5.5）。

both white-space:nowrap and display:inline have been supported on all major browsers for years (in IE, all the way back to IE 5.5).

这篇关于必须放置在一个水平线上的图像数组（带滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！