Question

当涉及到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>

我的要求是，当第四个图像被调用时，它应该自动落入下一行。请建议如何去做。是否还有其他办法以更好的方式做我正在做的事情。

Answer 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>

将图像放在表格行中

1 个答案: