將圖像放置在表格行中

我有從數據庫中調用的動態圖像數量.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諮詢如何去了解它。是有任何其他的方式來做更好的方式。

來源

2013-03-08 user1411837

你在這裏使用任何服務器端語言？ – 2013-03-08 06:25:45

yes..iam使用php – user1411837 2013-03-08 06:36:02

您不能將''標籤放在另一個''標籤內，否則它將無法正常工作。 – 2013-03-08 06:46:20

使用服務器端語言執行此操作的最簡單方法。如果你使用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-08 06:38:11

將圖像放置在表格行中

回答

相關問題