將PHP生成的表格佈局轉換爲div

Question

我正在構建一個使用視頻插件生成視頻鏈接庫的網站。問題是這些圖像和鏈接被放入表格中，這與我的網站的響應式設計不兼容。作爲一名網頁設計師而不是PHP開發人員，在查看代碼時，我無法理解如何取出生成表格的所有元素，並用簡單的div容器替換它們，儘管它看起來應該很漂亮直接爲PHP的人。

<table id="media_galery"> 
    <?php 
    $t = 0; 

      for ($i = 0; $i < count($cArray); $i++) { 
       $t++; 
       $file = $cArray[$i]; 
       $remote = null; 
       $name = $file->getFileName(); 
       $file_path = BASE_URL.DIR_REL.$file->getDownloadURL(); 
       $ak_d = FileAttributeKey::getByHandle('media_date'); 
       $date = $file->getAttribute($ak_d); 

       $ak_a = FileAttributeKey::getByHandle('media_artwork'); 
       $image = $file->getAttribute($ak_a); 
       if($image==null){ 
        $image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png'; 
       }else{ 
        $image = File::getByID($image->fID); 
        $image_path=$image->getURL(); 
       } 


       $file_src = BASE_URL.DIR_REL.$file->getRelativePath(); 

       $ak_s = FileAttributeKey::getByHandle('media_audio'); 
       $audio = $file->getAttribute($ak_s); 
       if($audio){ 
        $audio_array = $mh->getMediaTypeOutput($audio); 
        $audio_path = $audio_array['path']; 
        $file_src = $audio_path; 
       } 

       $video = null; 
       $ak_s = FileAttributeKey::getByHandle('media_video'); 
       $video = $file->getAttribute($ak_s); 

       if($video){ 
        $video_array = $mh->getMediaTypeOutput($video); 
        $video_path = $video_array['path']; 
        var_dump($video_array['id']); 
        $image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']); 
        //$video_src = $video_path.'?width='.$width.'&height='.$height; 
        //$file_src = $video_src; 
        if($video_array['type'] == 'vimeo'){ 
         $file_src = 'http://player.vimeo.com/video/'.$video_array['id']; 
        }else{ 
         $file_src = $video_path; 
        } 
       } 
       ?> 
       <td valign="top"> 

        </a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/> 

       </td> 
      <?php 
      if($t == $spread){ 
       $t=0; 
       echo '</tr>'; 
      } 
    } 

    for($d=$t;$d<$spread;$d++){ 
     echo '<td></td>'; 
     if($t == $spread){ 
      echo '</tr>'; 
     } 
    } 
    ?> 
    </table> 

對此的任何幫助將非常感謝！

Answer 1

<div id="media_galery"> 
    <?php 
    $t = 0; 

      for ($i = 0; $i < count($cArray); $i++) { 
       $t++; 
       $file = $cArray[$i]; 
       $remote = null; 
       $name = $file->getFileName(); 
       $file_path = BASE_URL.DIR_REL.$file->getDownloadURL(); 
       $ak_d = FileAttributeKey::getByHandle('media_date'); 
       $date = $file->getAttribute($ak_d); 

       $ak_a = FileAttributeKey::getByHandle('media_artwork'); 
       $image = $file->getAttribute($ak_a); 
       if($image==null){ 
        $image_path=$uh->getBlockTypeAssetsURL($bt).'/tools/mp3.png'; 
       }else{ 
        $image = File::getByID($image->fID); 
        $image_path=$image->getURL(); 
       } 


       $file_src = BASE_URL.DIR_REL.$file->getRelativePath(); 

       $ak_s = FileAttributeKey::getByHandle('media_audio'); 
       $audio = $file->getAttribute($ak_s); 
       if($audio){ 
        $audio_array = $mh->getMediaTypeOutput($audio); 
        $audio_path = $audio_array['path']; 
        $file_src = $audio_path; 
       } 

       $video = null; 
       $ak_s = FileAttributeKey::getByHandle('media_video'); 
       $video = $file->getAttribute($ak_s); 

       if($video){ 
        $video_array = $mh->getMediaTypeOutput($video); 
        $video_path = $video_array['path']; 
        var_dump($video_array['id']); 
        $image_path = $mh->getMediaThumbnail($video_array['id'],$video_array['type']); 
        //$video_src = $video_path.'?width='.$width.'&height='.$height; 
        //$file_src = $video_src; 
        if($video_array['type'] == 'vimeo'){ 
         $file_src = 'http://player.vimeo.com/video/'.$video_array['id']; 
        }else{ 
         $file_src = $video_path; 
        } 
       } 
       ?> 
       <div class="img_div<?php if($t == ($spread + 1)){$t=0; echo ' first';}?>"> 

        </a><img src="<?php echo $image_path?>" href="#popup_prep" alt="<?php echo $file_src?>" class="<?php echo $playerID?>player_get<?php echo $i?> gallery_thumb" href="<?php echo $file_src?>"/> 

       </div> 
      <?php 
     } 

    ?> 
    </div> 

我不知道是什麼的$spread值，但上面的代碼，你會輸出是這樣的：

<div id="meda_galery"> 
    <div class="img_div"> 
     ... 
    <div> 
    <div class="img_div"> 
     ... 
    <div> 
    <div class="img_div first"> 
     ... 
    <div> 
    <div class="img_div"> 
     ... 
    <div> 
</div> 

上面的例子假設2（SO 2列的傳播）。您可以浮動每個div，但使用clear來爲每個「first」類創建一個新行。