3

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

编辑：我尝试将 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;
            }
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

float封闭的 div，而不是 img

所以像，

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