Question

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

编辑：我已经尝试将id更改为模板图像的类，我也尝试了“.like_content1 img”方法，但这两种方法都不适用于我。我的最终目标是创建3个不同的集合（电影，音乐，书籍）中的3行，每个集合中的5个图像在各自的行中对齐。我已经包含了一个模拟图像，显示了我希望它看起来如何。 this is how i want it to look like

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

Answer 1

首先，不要在模板中的元素上使用id，因为你不应该在同一个HTML页面上拥有多个具有相同id的元素。但要实现您想要的功能，您可以在CSS中使用后代选择器

.like_content1 img {
  float:left;
}

此选择器匹配具有类like_content1的元素内的所有img标记。

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

Answer 3

据我所知，你需要将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页面将有多个此模板的替换。

Answer 4

float封闭的div，而不是img

等等，

    .like_content1 div {
        float: left;
    }

如何定位grails中的单个元素g：render

4 个答案: