javascript - 如何将图像列表放在固定的 div 中

标签 javascript html css fixed

我有一个横向固定的 div(如菜单栏),我想弄清楚如何将图像放在那里,以类似表格的 View (例如 3 列和 X 行)知道那些图像是动态生成的。

更具体地说,我要放 10 张图片。我可以将它们放在 html 中,但 javascript 会根据各种因素(主要是用户权限)显示或不显示某些图像,因此我希望这些图像自动重新排序。

我更喜欢 JS 而不是 CSS 粉丝,所以我会将图像固定放置并使用脚本来处理它们的顶部和左侧属性,但我确信有一些方法可以使用 css(不是 css3,我正在尝试做一些追溯兼容性)或任何其他更简单的方法。

非常感谢

最佳答案

我认为这就是您所需要的。 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%;
}

关于javascript - 如何将图像列表放在固定的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11485391/

相关文章:

javascript - AngularJS 工厂

JavaScript 获取子元素

javascript - 丰富的 Web 应用程序的嵌套链接(标签)的有效替代方案?

jquery - onfocus 从文本区域中删除文本

javascript - 未捕获的类型错误 : Cannot read property '_adjustMaxNumberOfFiles' of undefined

javascript - 表单控件 : Pristine attribute is not being updated?

css - html5 导航中的中心 Logo

css - 是否有可应用于特定类的排版 CSS 重置?

CSS:设置背景颜色为窗口宽度的 50%

javascript - TypeScript/RxJS - 可观察的订阅()方法完成()未运行