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 に答える