0

我正在尝试在电影中创建一个演员列表，在演员姓名及其伴随角色的左侧有一个小的个人资料图像，但是我的图像奇怪地堆叠在一起，我不知道为什么。演员名称、他们的角色和图像都是从外部 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 上展示的布局，演员的姓名和角色与图像垂直对齐： 想要的布局

4

3 回答 3

2

看起来您正在浮动图像，但没有在图像+文本单元之间应用“清除”。尝试应用“clear: both;” 每个演员实例之间？

于 2012-12-13T21:04:12.363 回答
0

将 image 和 p 元素包装在一个 div 中，并在 div 上有 clear:both 。将内联样式设置为一个类。我将它内联作为一个快速而肮脏的例子。

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-13T21:18:50.457 回答
0

我不方便创建一个包装每个图像和文本组的 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-13T21:21:31.927 回答