在滚动div内水平对齐DIV

我正在拍摄一个摄影网站。我们试图追求的目标之一是为图像显示“胶卷”类型，而不是通常的缩略图或“制表”形式。在滚动div内水平对齐DIV

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

另一件事是齿轮的轻微扳手是事实，我把图像作为divs的背景。这是用于基本的“复制保护”，也可以在div上悬停的照片上叠加项目。

我已经得到它的那一刻编码的方法是：

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

我画一个skitch助阵本证的可视化..

alt text

由于一旦容器的宽度满足，图像分区将下降到下一行。为的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>

来源

2010-10-27 ajdi

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

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

来源

2010-10-27 15:39:45 stevelove

虽然我很想说，工作多，我得到相当的滚动条（我定制他们的webkit：d）对于垂直和水平。水平只是一个空白的卷轴，没有水平的内容，而垂直将允许我在页面上下滚动。 – ajdi 2010-10-27 15:42:09

根据你发布的代码，你不应该得到垂直滚动条。如果你看到它们，那是因为你的内容比你的容器更高，可能是CSS引起的。 – stevelove 2010-10-27 15:49:23

尝试使用容器的溢出属性。所以是这样的：

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

这里有一些例子http://www.brunildo.org/test/Overflowxy2.html

来源

2010-10-27 15:40:26 dane

同样的东西，显示水平滚动条，但没有滚动。点击并向下拖动可显示所有内容.. – ajdi 2010-10-27 15:43:44

我想你可能需要定义您的画廊的宽度！请参阅fiddle 我已经添加了视图来保存所有内容，但是好像您似乎发现没有办法强制某一行，可能可以执行某些操作。另外声明在页面顶部的宽度与服务器端逻辑，而不是在小提琴上的JavaScript

来源

2010-10-27 15:57:22 BenWells

如果您删除“float：left;”从画廊块的风格，并添加“白空间：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>

来源

2010-10-27 15:58:01 Oliver

没有测试，但你可以使用

空白：NOWRAP;

css属性可以在指定宽度时阻止div的包装？

来源

2010-10-27 15:59:01

我想出了一个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>

来源

2010-10-28 01:02:09 Sam152

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

的jQuery：

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

来源

2010-10-28 01:31:31 jeffreynolte

在滚动div内水平对齐DIV

回答

相关问题