Question

我想在每个框中显示16个框，我想要显示三个图像。

例如：

<tr>
    <td style="width:auto; padding:15px;">
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
        <img src="/static/images/seo1.jpg" >
    </td>
</tr>

到目前为止，我有一张4x4的表格，只显示了单行。

现在我将如何进行以实现这一目标.. 表格是这类问题的好选择....

我想要这个

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
       <td style="width:auto;">

            <img src="/static/images/seo1.jpg" height="50" width="50">    
        </td>

        <td style="width:auto;">
            <img src="/static/images/seo1.jpg" height="50" width="50">    
        </td>
    </tr>

    <tr>
        <td colspan="2"  style="width:auto;">

            <img src="/static/images/seo1.jpg" height="50" width="100">
        </td>
    </tr

但如果我把这张桌子放在主桌子里，整个结构就会迷失方向...... 我希望这种结构在16个单独的盒子里......

Answer 1

请问您为什么使用桌子而不是DIV？但是，只需复制你的img代码，这就是你在每个框中显示3个图像的方式。

<tr>
    <td style="width:auto; padding:15px;">
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
    </td>
    <td style="width:300px; padding:15px;">
       <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
        <img src="/static/images/seo1.jpg" >
    </td>
</tr>

Answer 2

现在谁将创建 16盒??

如果您了解jQuery，那就更简单了。

<div id="main"></div>

//As I always avoid using table's
for(var i=0;i<4;i++){
    $('#main').append('<div></div>');
    for(var j=0;j<4;j++){
        $('#main>div').eq(i).append('<div></div>');
    }
}

然后使用css：

#main>div>div{float:left;/*some width and height values here*/}

<强> Working Fiddle

我想在每个框中显示16个框，我想显示三个图像

2 个答案: