0

html/css に関しては、私は非常に弱いです。

データベースから動的な数の画像が呼び出されています.3枚の画像が一度に一列に表示されています。これは、テーブルの html/css です。

<style>
    table { 
        border-collapse: collapse; 
        table-layout: fixed;
        max-width: 100%
    }
    figure {
        display: block;
        margin-before: 1em;
        margin-after: 1em;
        margin-start: 40px;
        margin-end: 40px;
    }
    figure img {
        padding: 5px;
        background: #fff;
    }
    figcaption {
        padding: 5px;
        font-family: 'Cherry Swash', cursive;
        font-size: 1em;
        font-weight: 700;
        border: none;
        background: transparent;
        word-wrap:normal;
        text-align: center;
    }
    a {
        text-decoration:none;    
    }
</style>

<table>
    <tr><td align='left'>
        <a href="works.php" title="Click To See More Work">
            <figure>
                <img src="img/11.jpg"  alt="Picture 2" title="Picture 2">
                <figcaption>
                    project name 
                    <br> Sitting stick figures hunched over their laptops! 
                    See <a href="#">more</a>.
                </figcaption>
            </figure>
        </a>
    </td></tr>
</table>

私の要件は、4 番目のイメージが呼び出されたときに、自動的に次の行に配置されるようにすることです。どうすればよいかアドバイスをお願いします。

4

1 に答える 1

1

サーバー側の言語を使用してこれを行う最も簡単な方法。PHPを使用している場合は、この方法で行うことができます

    <table>
    <tr>
    <?php for(int i=0; i<number_of_images; i++){ ?>
       <td align='left'>
        <a href="works.php" title="Click To See More Work">
        <figure>
            <img src="img/11.jpg"  alt="Picture 2" title="Picture 2">
            <figcaption>
                project name<br>Sitting stick figures hunched over their laptops! See <a href="#">more</a>.
            </figcaption>
        </figure>
        </a>
    </td>
    <?php 
         if(i%3 == 0){ echo "</tr><tr>";}
    }
    ?>
    </tr>
    </table>
于 2013-03-08T06:38:11.420 に答える