css水平顯示圖像

我試圖垂直顯示圖像5每行使用PHP和我已經實現了它。我也使用一個div，這似乎是造成一個問題。圖像水平顯示，但每個圖像之間似乎存在巨大的空間。css水平顯示圖像

繼承人的PHP代碼：

<table width="500" border="0" cellpadding="2" cellspacing="3"> 
    <tr> 
    <?php 
    // get the images for the new videos 

    $query = "SELECT * FROM videos"; 
    $result = mysql_query($query); 
    $numimages = 0; 
    while ($row = mysql_fetch_assoc($result)) { 
     extract($row); 
     // extract youtube id 

     preg_match('/[\\?\\&]v=([^\\?\\&]+)/', $video_link,$matches); 
     // $matches[ 1 ] should contain the youtube id 
    ?> 
     <td valign="top"> 
      <div id="videogallery"> 
       <a rel="#voverlay" href="http://www.youtube.com/v/<?php echo $matches[ 1 ];?>?autoplay=1&amp;rel=0&amp;enablejsapi=1&amp;playerapiid=ytplayer" title="<?php echo $video_title;?>"> 
        <img src="http://img.youtube.com/vi/<?php echo $matches[ 1 ];?>/default.jpg" alt="<?php echo $video_title;?>" class="border_black" /> 
       </a> 
      </div> 
     </td> 
     <?php 
     $numimages++; 
     if ($numimages%3 == 0) 
      echo "</tr><tr>"; 
    } 
    ?> 
    </tr> 
</table>

這是CSS：

#videogallery { 
    width:500px; 
    zoom:1; 
} 
#videogallery span{ 
    display:block; 
} 
#videogallery a{ 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    position:relative; 
    vertical-align:top; 
    margin:3px; 
    width:160px; 
    font:12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; 
    font-weight:normal; 
    color:#333333; 
    text-decoration:none; 
    text-align:center; 
    opacity:0.87; 
} 
#videogallery a img{ 
    display:block; 
    border:none; 
    margin:0; 
} 
#videogallery a:hover{ 
    opacity:1; 
}

來源

2011-07-04 tycoon

你的問題是什麼？ – Arjan

你的php代碼是不相關的;瀏覽器看到的呈現的html是什麼（查看源代碼）？ –

應該避免'extract（）'。它在「愚蠢的PHP」列表中用register_globals和magic_quotes_gpc排列在那裏。 –

我注意到了一些事情。首先，id在html中必須是唯一的，但它們不在你的文檔中。您在循環中創建<div id="videogallery">，以便id多次出現。您應該將id更改爲class（或完全刪除div）。

另外#videogallery被設置爲具有500像素的寬度，這也是包含表格的寬度。如果您打算有5張圖片相鄰，則div（或圖片）的寬度不應超過100 px。減小寬度應該可以幫助您縮小圖像之間的差距。

使用表格佈局通常不是一個好主意，應該可以在沒有表格的情況下獲得相同的效果。這給你更多的靈活性。（確定每行圖像的數量應該是一個佈局問題，而不是一個代碼問題。）

來源

2011-07-04 19:45:50 Arjan

所以真的，尤其是考慮到他的物品容器有固定的寬度。將他的物品容器設置爲行內區塊，並添加CSS第n種（5）規則，他可以輕鬆地微調視覺而無需修改其代碼 –

thnx Arjan，div創建了一個問題，循環。我也刪除了表格。 – tycoon

似乎有每個間隙之間存在着巨大的空間。

你的意思是7像素的差距？

<table width="500" border="0" cellpadding="2" cellspacing="3">

來源

2011-07-04 19:40:23

對不起，我的意思是每個圖像之間有一個巨大的空間 – tycoon

是的，我刪除了桌子，只用css – tycoon

你可以避免<table>產品總數使用DIV和CSS float看到這個http://css.maxdesign.com.au/floatutorial/tutorial0407.htm

見http://jsfiddle.net/ZfyRb/

來源

2011-07-04 19:46:08

甚至不需要'浮動' - 他已經在使用'inline-block'，它應該完全按照他的意願去做......或者它會這樣做，如果他沒有搞亂所有這些表並且包裝div 。 – Spudley

我刪除了桌子，我的右邊，我不需要它。 Bt我需要div coz我試圖讓這個彈出和覆蓋效果，當用戶點擊一個視頻 – tycoon

90％的代碼是完全多餘的。

你不需要這些表格（事實上，這些日子裏它被認爲是非常糟糕的使用它們的佈局），並且你不需要在圖像周圍包裝<div>元素。

您的<a>標籤已經與display:inline-block;風格，所以實際上他們應該已經水平排列沒有任何東西。只要把它們放在一起，沒有額外的垃圾，他們會很高興地爲你排隊。您可以使用margin和padding在它們之間放置任何需要的額外間距。

你需要的僅僅是一個單獨的包裝<div>圍繞整個區塊執行一個固定的width爲整個塊，以便他們包裝到正確的點的新行。

希望有所幫助。

來源

2011-07-04 20:24:00 Spudley

我想學習編碼純CSS .... bt被用於表..變化需要時間和一個很多學習。直到我學會完全使用CSS我嘗試使用兩個。 – tycoon

css水平顯示圖像

回答

相關問題