浮動圖像堆積

我想創建一個影片中的演員名單，一個小配置文件圖像左側的演員的名字和他們的伴隨字符，但是我的圖像奇怪地堆疊在另一個之上，米不知道爲什麼。演員的名字，他們的角色和形象都是從一個外部API動態拉入的。浮動圖像堆積

下面是當前的佈局的圖像： Current layout

所附HTML和CSS低於： HTML

<?php 
    foreach($tmdb_cast['cast'] as $castMember){ 
     if ($tmp++ < 10) 
      echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />'; 
      echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>'; 
    } 
    echo '<p id="morecast"><a href="http://www.imdb.com/title/' . $imdb_id . '/fullcredits" alt="View full cast list on IMDb">[...view all cast]</a></p>' 
?>

CSS

#cast { 
    margin-left: 50%; 
    border: solid 1px red; 
} 

.actor_image { 
    float: left; 
} 

#morecast { 
    text-align: right; 
}

佈局我嘗試着實現與IMDb上顯示的類似，演員的姓名和字符與圖像垂直對齊： Wanted layout

來源

2012-12-13 Alex Ryans

感謝後編輯器改進代碼格式 - 我是新來的堆棧，並沒有完全掌握如何最佳格式自動編碼！ –

如果您發佈實際的HTML，而不是PHP，您將得到更好的答案。 – KatieK

看起來您正在浮動圖像，但未在您的圖像之間應用「清晰」圖像+文本單元。嘗試應用「明確：兩者」;每個演員實例之間？

來源

2012-12-13 21:04:12

感謝你 - 這是現在堆疊一個在另一個下面的圖像，這是完美的，但是我想把演員的名字和他們的角色放置在圖像旁邊，就像我在原版中展示的IMDb例子帖子，並且「明確：兩者」都將其放置在圖像下方。 –

你可以應用float：left;到文本元素，並把它放在下面。事情是這樣的： HTML：

actor txt

CSS： .actor_image，.actor_text {/ *其中actor_text是你的新類*/ 浮動：左; } .actor_clear { 明確：兩者; } （抱歉關於多個編輯;仍然計算出stackoverflow格式的評論） –

將圖像和p元素包裝在一個div中並且清楚：都在div上。將內聯樣式設置爲一個類。我把它作爲一個快速而骯髒的例子進行了內聯。

foreach($tmdb_cast['cast'] as $castMember){ 
    if ($tmp++ < 10) 
     echo '<div style="clear: both;">' 
     echo '<img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '" class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />'; 
     echo '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p>'; 
     echo '</div>' 
}

來源

2012-12-13 21:18:50

I'ts方便地創建一個包裝每個圖像和文字組CSS類：

echo '<div class="actor"> 
     <img src="http://cf2.imgobject.com/t/p/w45' . $castMember['profile_path'] . '"  class="actor_image" alt="' . $castMember['name'] . '" title="' . $castMember['name'] . '" />'; 
echo  '<p>' . $castMember['character'] . ' - ' . $castMember['name'] . '</p> 
     </div>';

和浮每個容器

.actor{ 
    float:left; 
    clear: left; 
}

現在你有一個盒子角落找尋圖像+文本組，您可以浮動。如果這不能解決問題，下一步是定義.actor「寬度」屬性

來源

2012-12-13 21:21:31 Nenitus

浮動圖像堆積

回答

相關問題