html - 如何定位grails g :render中的单个元素

Question

我创建了一个 grails g:render 标签，它引用代表我元素中用户最喜欢的电影、书籍、音乐等的图像。我遇到的问题是对集合进行样式设置。我似乎无法针对特定收藏的单个图像，比如音乐。有人可以帮我找到一种方法来定位特定集合的 g:render 中的图像吗？我已经提供了我的 gsp 文件和模板文件的代码。我的目标是设置这些图像的样式，以便每个类别都显示为其各自图像的行，但是当我尝试在“like_content”div 上使用 float:left 时，整个集合是 float 的，而不是它的单个图像。任何帮助将不胜感激。

编辑:我已经尝试将 id 更改为模板图像的类，我也尝试了“.like_content1 img”方法，但两者都不适合我。我的最终目标是创建 3 行 3 个不同的集合(电影、音乐、书籍)，每个集合中的 5 张图像在各自的行中对齐。我已经包含了我希望它看起来像的模型图像。

普惠制:

<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;
            }

Answer 1

你需要 float 你的图片:

.like_content1 img {
    float:left;
}

然后您需要清除 float 以开始下一行:

<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>