浮动图像堆积

我想创建一个影片中的演员名单，一个小配置文件图像左侧的演员的名字和他们的伴随字符，但是我的图像奇怪地堆叠在另一个之上，米不知道为什么。演员的名字，他们的角色和形象都是从一个外部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

浮动图像堆积

回答

相关问题