Question

我正在尝试创建一个博客档案，其中两个不同的帖子布局垂直交替。例如，第一个必须是：图片左侧+内容右侧;第二个必须是：图片右侧+内容左侧，依此类推。

我要显示这样的帖子：

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

我可以告诉函数交替使用两种布局吗？

Answer 1

以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 %}

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

替代布局

1 个答案: