-1

各ボックス内に16個のボックスを表示したい3つの画像を表示したい。

例えば：

<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個の個別のボックスに入れたい...

4

2 に答える 2

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>
于 2013-03-25T12:14:06.533 に答える
0

さて、誰が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*/}

ワーキングフィドル

于 2013-03-25T12:19:32.653 に答える