浮动的图像堆叠

Question

我正在尝试在电影中创建一个演员列表，在演员姓名及其附带角色的左侧有一个小的个人形象，但是我的图像奇怪地堆叠在一起，我不确定为什么。演员姓名，他们的角色和图像都是从外部API动态提取的。

下面是当前布局的图片：

随附的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上显示的布局，其中actor的名称和字符与图像垂直对齐：

Answer 1

看起来您正在浮动图像，但不会在图像+文本单元之间应用“清晰”。尝试应用“清除：两者”;每个演员实例之间？

Answer 2

将图像和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>'
}

Answer 3

创建一个包装每个图像和文本组的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“width”属性