在滾動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

回答

相關問題