javascript - 如何制作水平图像网格画廊

Question

我想要缩略图及其名称、大小和删除按钮位于其下方，并且与出现在其旁边的下一个缩略图具有相同的方向。它必须看起来像水平图片库。现在显示垂直图像库。请帮助。有关的代码行看起来像

 for(var i = 0; i < o["files"].length; i++)
                {


                     str += '  <tr> \
                        <tr> <td>                       \
                         <span class="preview">\
                         <a class="fancyOpen" rel="fancyOpen" href="'+o["files"][i].url+'"><img src="'+o["files"][i].thumbnail_url+'" /></a>       \
                         </span>                 \
                         </td>  </tr>                                       \
                        <tr>   <td>  \
                        <p class="name">'+o["files"][i].name+'</p>\
                        </td></tr>\
                         <tr></td>
                        '+o["files"][i].size+ ' KB';<td></tr>

                        if(showDel === undefined)
                        {
                        str += '<tr><td>\
                        <form method="get" >       \
                        <input type="hidden" autocomplete="false" name="iid" value="'+o["files"][i].id+'" >    \
                        \
                        <a  href="'+o["files"][i].delete_url+'&iid='+o["files"][i].id+'" target="frametoDelete" class="btn btn-danger delete">  \
                        <span>Delete</span>   \
                        </a>\
                        </form></td></tr>';


                        }

                        else

                        {}

Answer 1

       var str='<table border=1><tr>';
        for(i=0;i<10;i++)
          {
        str += '<td height=150px valign=bottom>  <div height=100px class="preview">Thumbnail</div><table border=1><tr><td>   <span class="name">'+"NAME"+'</span>   </td><td>'+"SIZE"+ 'KB+ </td></tr><tr><td colspan=2 align=center>DELETE</td></table> </td>';

                           
          }
        str+='</tr></table>';
        document.write(str);