一個圖像表格，位於div

有一個很好的JavaScript庫，用於在iPhone上顯示名爲「jaipho」的照片。我試圖調整它的滑塊實現在一個正常的瀏覽器中工作，而且我遇到了一些問題。一個圖像表格，位於div

下面是它的滑塊工作原理的總結：有一張水平排列的圖像表。該表格包含在一個div中，該div有overflow：hidden，然後一些javascript通過將marginLeft設置爲某個負數來移動表格。

更具體地說：通過在javascript中設置其innerHTML，將表放在div的內部。每個表格單元格都是「幻燈片」類，它由CSS設置爲iPhone的寬度。通過調用appendChild將照片動態放置在表格單元格中，以便它們不需要一次全部加載。

它在MobileSafari的iPhone上效果很好。在水平排列的照片中，人們可以向左滑出視圖，而下一張照片則從右側滑入。

現在我試着在瀏覽器窗口中的Mac上工作。問題是爲每個單元格獲得恆定的寬度 - 我無法使用CSS，因爲我想要的寬度是window.innerWidth，而不是像iPhone那樣的固定寬度。我試着用「寬度」標籤（或「樣式」標籤）將表格單元設置爲窗口的寬度。縱觀Chrome瀏覽器在其Javascript Console中的想法，就好像表格忽略了單元格設置其寬度的努力，而表格將它們的寬度設置得非常窄以致完全適合窗口。（或進入其包含的div，即使它被設置爲「overflow：hidden」。）

任何人都有任何建議如何強制一個表的像素非常非常寬，即使只有一小部分會曾經被展示過嗎？

感謝，

戴夫

來源

2011-08-30 Dave O

你可以顯示你的代碼到目前爲止/你試過了嗎？ – ZenMaster

我最近建立這樣的事情，而這裏的結構：

<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden"> 
    <div id="slider" style="width: 5000px;"> 
     <div id="slide1" style="float: left; width: 500px;">...</div> 
     <div id="slide2" style="float: left; width: 500px;">...</div> 
     <div id="slide3" style="float: left; width: 500px;">...</div> 
     <!-- add as many as you want, just make sure it fits in the 5000px width above --> 
     <div style="clear: both;"><div> 
    </div> 
</div>

然後滑桿的運作方式調整了「滑塊的CSS left財產'div。所以基本上觀看窗口是500px以及每個「幻燈片」的寬度。我猜想關鍵是每張幻燈片上的float: left。

在行動中看到這個div結構，檢查出我的this site

來源

2011-08-30 03:36:00

非常棒！謝謝！ –

@Dave不客氣！ –

編碼爲了獲得細胞採取適當的寬度右列的頂部，你必須調整表格寬度容納所有這些細胞。看看這個小提琴：http://jsfiddle.net/USRww/1/。我正在調整表格以容納所有單元格，假設每個單元格都是瀏覽器窗口寬度的100％。我在那裏使用百分比，所以一切都是流暢的。

該標記正在使用一個表，因爲你建議，但我建議只使用一個容器div那裏與每個單元格的一大堆浮動div。

來源

2011-08-30 03:48:28 Artyom

一個圖像表格，位於div

回答

相關問題