Question

我正在摄影网站上工作。我们试图瞄准的一件事是图像的“电影条”显示类型，而不是通常的缩略图或“制表”形式。

它适用于表格。没问题。唯一让我不想使用表的是我没有显示数据，不需要列和行。

另一件事是齿轮中的轻微扳手是我将图像作为div的背景。这是基本的“复制保护”，因此我可以在div悬停时将照片叠加在照片上。

目前我编码的方式是：

container [
  [image]
  [image]
  [image]
  [image]
]

我已经绘制了一个小故障，以帮助实现这个的可视化..

alt text

只要满足容器的宽度，image-div就会下降到下一行。 Div的CSS如下：

.gallery_block_image_p {
width: 354px;
height: 532px;
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 10px;
float: left;
background-repeat: no-repeat;
}

和容器...

#gallery {
    border: 0px solid black;
    position: relative;
    top: 99px;
/*  width: 8000px;  */ /* When this is uncommented it works, with a huge amount of space to the right */
    height: 532px;
    z-index: 99;
    }

最后但并非最不重要的是，用于图像div的HTML ...

<div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(gallery_img/ith/adamd_20101021_137.jpg);"></div>

Answer 1

如果删除“float：left;”从图库块样式中添加“white-space：nowrap”到容器然后它应该工作。

编辑：我认为这就是你要找的东西

<div style="width: 800px; overflow-x:auto; white-space: nowrap;">
    <div style="width: 300px; height: 100px; background-color: #f00; display: inline-block;"></div>
    <div style="width: 300px; height: 100px; background-color: #0f0; display: inline-block;"></div>
    <div style="width: 300px; height: 100px; background-color: #00f; display: inline-block;"></div>
    <div style="width: 300px; height: 100px; background-color: #ff0; display: inline-block;"></div>
</div>

Answer 2

尝试指定宽度800并添加溢出声明：

#gallery {
   border: 0px solid black;
   position: relative;
   top: 99px;
   width: 800px;
   height: 532px;
   z-index: 99;
   overflow:auto;
}

Answer 3

尝试使用容器的overflow属性。所以像这样：

#gallery {
overflow-x: scroll;
overflow-y: hidden;
}

以下是一些示例http://www.brunildo.org/test/Overflowxy2.html

Answer 4

我认为您可能需要定义图库的宽度！见fiddle 我已经添加了视图以保留所有内容，但是就像你似乎发现没有办法强迫一条线，也许能够做一些定位的事情。或者使用服务器端逻辑而不是小提琴上的javascript声明页面顶部的宽度

Answer 5

未经测试，但您可以使用

空白：NOWRAP;

css属性，用于在指定宽度时阻止div包装？

Answer 6

我想出了一个hacky解决方案，唯一的缺点是，你需要知道滚动画廊的宽度。我确信这很容易预先确定或计算。以下是代码和here is an online demo。

如果结果是动态的，某些cheeky jQuery将允许您动态计算它。

<style type="text/css">
#gallery {
    border: 0px solid black;
    position: relative;
    width:500px;
    height: 450px;
    overflow:scroll;
    overflow-y:hidden;
    z-index: 99;
}

.gallery_block_image_p {
    width: 354px;
    height: 400px;
    margin: 0 0 0 10px;
    padding: 0;
    background-repeat: no-repeat;
    display:inline-block;
}
#stretch{
    width:1850px;
}
</style>

<div id="gallery">
    <div id="stretch">
        <div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
        <div id="gallery_1_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
        <div id="gallery_2_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
        <div id="gallery_3_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
        <div id="gallery_4_0_img" class="gallery_block_image_p" style="background-image: url(http://blogs.westword.com/demver/kitten.JPG);"></div>
    </div>
</div>

Answer 7

我做了一些与网站非常相似的事情，并且受到了挑战，因为用户将自己添加/删除div。我的解决方案是使用jQuery计算容器中的每个项目/ div，并根据容器中的项目设置容器的宽度。

jQuery的：

   $('.gallery-item').each(function(scroll){ n = n+310; });
    $('#gallery').css( "width", n);
 });

在滚动div中水平对齐DIV

7 个答案: