如何把圖像列表固定格

我有一個橫向固定格（如菜單欄），我想弄清楚如何我可以把圖像放在那裏，在一個類似於視圖（例如3列和X行）知道這些圖像是動態生成的。如何把圖像列表固定格

爲了更具體一些，我會有10個圖像放在那裏。我可以把它們放在HTML中，但是然後javascript會根據各種因素（主要是用戶特權）顯示或不顯示某些圖像，所以我希望這些圖像能夠自動重新排序。

我更像一個JS比一個CSS風扇，所以我會將圖像放在固定的位置，並使用腳本來處理它們的頂部和左側屬性，但我確信有一些方法可以用css（而不是css3 ，我試圖做一些復古兼容性）或其他更簡單的方法。

非常感謝

來源

2012-07-14 Rayjax

出於安全：隱藏/顯示根據用戶權限的元素最好應不會在客戶端完成。只有用戶有權訪問的內容才能訪問瀏覽器。 – techfoobar 2012-07-14 16:31:30

我覺得這是你所需要的。 http://jsfiddle.net/x6zfW/10/

請確認。

HTML：

<div id="ui_myMenu"> 
      <div id ="ui_ui_myMenuTitle">HELLO TITLE</div> 
      <img id="ui_image1" class="ui_menuIcons" src ="http://www.designworks.co.nz/uploads/images/case-studies/nz-post/post_button.jpg"/> 
      <img id="ui_image2" class="ui_menuIcons" src="http://t2.ftcdn.net/jpg/00/24/77/15/400_F_24771516_GheG3ehk2o3T6mJJkFy9k2siYoMrVigc.jpg"/> 
</div>

CSS：

#ui_myMenu{ 
position: fixed; 
    bottom: 15%; 
    width: 575px; 
    height: 426px; 
    left: 2%; 
    top:2%; 
    background:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg') left top no-repeat; 
} 
#ui_myMenuTitle{ 
    margin-left: 16%; 
    margin-top: 4.8%; 
    font-size: 380%; 
} 
.ui_menuIcons{ 
    float: left; 
    width : 5%; 
    height : 7%; 
}

來源

2012-07-14 17:12:41 AdityaSaxena

您可以對此進行進一步編輯，以便它適合您，就像您想要的一樣。 – AdityaSaxena 2012-07-14 17:15:52

這似乎工作得很好，我會嘗試它的項目，我確認你（我希望^^） – Rayjax 2012-07-14 17:16:59

它運作良好，唯一的問題是當我想添加填充到myMenu的div，它會自己移動替換它的內容 – Rayjax 2012-07-14 17:31:01

聽起來像是masonry工作...

如果不是，包的圖標和定位自己的容器http://jsfiddle.net/mplungjan/HAggq/

來源

2012-07-14 16:26:11 mplungjan

嗯，我知道這個插件，但我認爲這對於更復雜的情況很有用，有很多矩形div和所有東西，我想要的只是一些元素的網格，當它們中的一些被隱藏或顯示時，它們會被替換掉：none 。這將自動與浮動divs我猜，但重點是，我不知道我是否可以在固定的父div使用它們。 – Rayjax 2012-07-14 16:29:16

關於div的問題是什麼？你可以舉個例子 - 例如一個jsfiddle與lorempixel – mplungjan 2012-07-14 16:30:43

http://jsfiddle.net/x6zfW/5/ 我把隨機圖像，但正如你所看到的，他們都堆積起來。我希望它們在網格中顯示到固定格中，並且如果可能使它們在沒有顯示時重新排列。再次感謝 – Rayjax 2012-07-14 16:43:04

如何把圖像列表固定格

回答

相關問題