Question

我有一个像这样的随机文件名：

iw5_x1_mp_x2_x3_x4_x5_x6

和“x”值是随机文本。像这样：

iw5_mp9_mp_aco_silence_texture1

我有这样的随机文字的图像：

iw5_x1_mp.jpg，aco.jpg，silence.jpg，texture1.jpg

我需要像这个预览一样展示这些图像：

 _______________________________________________
|                                               |
|                                               |
|                iw5_x1_mp.jpg                  |
|                                               |
| [x2.jpg] [x3.jpg] [x4.jpg] [x5.jpg] [x6.jpg]  |
|_______________________________________________|

整个方块是“iw5_x1_mp.jpg”图像，[x2.jpg] [x3.jpg] [x4.jpg] [x5.jpg] [x6.jpg]在iw5_x1_mp.jpg

上

我如何用html和css制作？！

Answer 1

根据您的插图：Fiddle

<强> HTML

<div class="back">
    <div class="icons">
        <img class="icon" src="http://wallpaperscraft.com/image/cat_kitten_cute_foot_face_1504_256x256.jpg" alt="" />
        <img class="icon" src="http://wallpaperscraft.com/image/78458/256x256.jpg" alt="" />
        <img class="icon" src="http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif" alt="" />
        <img class="icon" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0WfeXbfYPESZcDc7JYgJPM77WWMyA9Wot_ZxqY2bLi2reWMHylNw3plNg" alt="" />
    </div>
</div>

<强> CSS

div.back
{
    background-image: url("http://www.bideawee.org/Media/Image/Brafton/It-s-kitten-season--Is-your-home-ready-for-the-arrival-of-your-new-pet-_16001188_800827146_0_0_14067751_500.jpg");
    background-size: cover;
    width: 640px;
    height: 480px;
    position: relative;
}

div.back .icons
{
    bottom: 0;
    position: absolute;
    width: 100%;
}

div.back .icons img.icon
{
    display: block;
    float: left;
    margin: 0  0 4% 4%;
    width: 20%;
}

Answer 2

http://jsbin.com/mewuk/1/watch?html,css,output

    <body>
      <div class="container">
        <div class="wrapper">
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
          <div class="thumbnail"><img src="http://png-2.findicons.com/files/icons/1620/crystal_project/32/thumbnail.png"></div>
      </div>
    </div>
  </body>


.container{
  position:relative;
  width:100%;
  height:290px;
  background:url(http://vecto2000.com/wp-content/uploads/2011/03/Dark_Metal_Background.jpg) center top fixed;
  background:cover;
 }
.wrapper {
   max-width:180px;
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   margin:0 auto;
}
.thumbnail {
   display:inline; 
}

http://jsbin.com/mewuk/1/watch?html,css,output

如何使图像比其他像这样

2 个答案: