테이블 행에 이미지를 놓습니다.

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> 

내 요구 사항은 네 번째 이미지가 호출 될 때이 됐나에 대해, 자동으로 이동하는 방법을 다음 행 .Kindly 조언에 빠지게해야한다는 등이다 iam이 더 나은 방식으로하는 일을하는 다른 방법.

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>