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 番目のイメージが呼び出されたときに、自動的に次の行に配置されるようにすることです。どうすればよいかアドバイスをお願いします。