3

プロジェクトでユーザーのお気に入りの映画、本、音楽などを表す画像を参照する grails g:render タグを作成しました。私が抱えている問題は、コレクションのスタイリングにあります。音楽など、特定のコレクションの個々の画像をターゲットにすることはできないようです。特定のコレクションの g:render 内の画像をターゲットにする方法を見つけるのを手伝ってくれる人はいますか? gsp ファイルとテンプレート ファイルのコードを提供しました。私の目標は、これらの画像のスタイルを設定して、各カテゴリがそれぞれの画像の行として表示されるようにすることですが、「like_content」div で float:left を使用しようとすると、個々の画像ではなくコレクション全体がフローティングされます。どんな助けでも大歓迎です。

編集: ID をテンプレート画像のクラスに変更しようとしましたが、「.like_content1 img」アプローチも試しましたが、どちらもうまくいきません。私の最終的な目標は、3 つの異なるコレクション (映画、音楽、書籍) の 3 つの行を作成し、各コレクションにある 5 つの画像をそれぞれの行に並べることです。これをどのように見せたいかのモックアップ画像を含めました。これは私がそれをどのように見せたいかです

GSP:

<div class="like_content1">

    <g:render template="favorites" collection="${movies}" var="fav"/>

</div>

<div class="like_content2">

    <g:render template="favorites" collection="${music}" var="fav"/>

</div>

<div class="like_content3">

    <g:render template="favorites" collection="${books}" var="fav"/>

</div>

テンプレート：

<div id="favdiv">
<g:if test="${fav != null }">
    <img id="favimg" src="${fav.picture}">
    <p id="favname">${fav.name}</p>
</g:if>
</div>

CSS:

#favimg{
            width:150px;
            height: 150px;
            }               

            .like_content1{
            position: relative;
            left: 100px;
            bottom: 75px;
            }

            .like_content2{
            position: relative;
            left: 110px;
            bottom: 75px;

            }

            .like_content3{
            position: relative;
            left: 425px;
            }
4

4 に答える 4

2

まず、テンプレート内の要素に id を使用しないでください。同じ HTML ページに同じ id を持つ複数の要素を含めることは想定されていないためです。ただし、目的を達成するために、CSS で子孫セレクターを使用できます。

.like_content1 img {
  float:left;
}

このセレクターは、 class を持つ要素内で発生するすべての img タグに一致しますlike_content1。

于 2012-07-31T23:28:57.797 に答える
2

画像をフロートする必要があります:

.like_content1 img {
    float:left;
}

次に、フロートをクリアして次の行を開始する必要があります。

<div class="like_content1">
    <g:render template="favorites" collection="${movies}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content2">
    <g:render template="favorites" collection="${music}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content3">
    <g:render template="favorites" collection="${books}" var="fav"/>
    <br clear="all"/>
</div>
于 2012-08-01T13:41:08.890 に答える
0

私が理解している限りでは、CSS ルールを .like_content 内の画像に向ける必要があります。だから、書く代わりに

.like_content1{
    position: relative;
    left: 100px;
    bottom: 75px;
}

あなたが使う

.like_content1 img {
    position: relative;
    left: 100px;
    bottom: 75px;
}

重要: はid="xxx"、ページ上の一意のタグ用に予約されています。class="xxx"あなたの場合、結果のHTMLページにはこのテンプレートのいくつかの置換があるため、テンプレートでもそれを調整します。

于 2012-07-31T23:29:20.667 に答える
0

floatimg ではなく、囲んでいる div

のようなもの、

    .like_content1 div {
        float: left;
    }
于 2012-08-01T04:05:56.147 に答える