如何把图像列表固定格

我有一个横向固定格（如菜单栏），我想弄清楚如何我可以把图像放在那里，在一个类似于视图（例如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

如何把图像列表固定格

回答

相关问题