代码之家  ›  专栏  ›  技术社区  ›  xxcxx

备用布局

timber twig
  •  0
  • xxcxx  · 技术社区  · 7 年前

    我正在尝试创建一个博客档案,其中有两个垂直交替的不同帖子布局。例如,第一个必须是:图片左+内容右;第二个必须是:图片右+内容左,等等。

    我要展示这样的帖子: 

    {% for post in posts %}
{% endfor %}

    我能告诉函数交替使用两种布局吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   DarkBee    7 年前

    回答您的问题 twig -态度 

    {% for post in posts %}
<div class="{{ loop.index0 is even ? 'left' : 'right' }}">
     <img src="{{ post.getImage() }}" alt="{{ post.getTitle() }}" />
     <p>
         {{ post.getContent() }}
     </p>
</div>
{% endfor %}

    笔记 {{ loop.index0 is even ? 'left' : 'right' }} 只是 {% if loop.index0 is even %}left{% else %}right{% endif %}

    笔记 我用过 loop.index0 就因为我找到了测试 even 更“合乎逻辑”,然后是奇怪,我想从左边开始,而不是右边

    在我看来,最好使用纯 CSS 尽管如此 

    section div {
  width: 45%;
  float: left;
  clear: both;
  padding: 5px;
  border: 1px solid #A2A2A2;
  border-radius: 2px;
}

section div img {
  width: 60%;
  float: left;
  margin: 0 10px 0 0;
}

section div:nth-child(even) {
  float: right;
}

section div:nth-child(even) img {
  float : right;
  margin: 0 0 0 10px;
}
    <section>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div><div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
<div>
   <img src="https://www.darkbee.be/images/itemholder.png" />
   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.       
   </p>
</div>
</section>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号