10. 11. 2016, 12:59

Hallo,

ich habe leider Schwierigkeiten folgenden HTML-Aufbau mittels Fluid zu realisieren. Ich hoffe, dass mir jemand aushelfen kann.

  1. <div class="service">
  2. <div class="col-4">
  3. <h3 class="title">...</h3>
  4. <p class="teaser">...</p>
  5. </div>
  6. <div class="col-8">
  7. <div class="col-4">
  8. <h5 class="title">...</h3>
  9. <p class="teaser">...</p>
  10. </div>
  11. <div class="col-4">
  12. <h5 class="title">...</h3>
  13. <p class="teaser">...</p>
  14. </div>
  15. <div class="col-4">
  16. <h5 class="title">...</h3>
  17. <p class="teaser">...</p>
  18. </div>
  19. </div>
  20. </div>

Mein Fluid-Markup sieht folgendermaßen aus:

  1. <div class="service">
  2. <f:for each="{blocks}" as="block" iteration="iterator">
  3. <f:if condition="{iterator.isFirst}">
  4. <f:then>
  5. <div class="col-4">
  6. <h3 class="title">{block.title}</h3>
  7. <p class="teaser">{block.teaser}</p>
  8. </div>
  9. </f:then>
  10. <f:else>
  11. <f:if condition="{iterator.cycle} % 3">
  12. <f:then>
  13. <div class="col-8">
  14. <div class="col-4">
  15. <h5 class="title">{block.title}</h3>
  16. <p class="teaser">{block.teaser}</p>
  17. </div>
  18. </f:then>
  19. <f:else>
  20. <div class="col-4">
  21. <h5 class="title">{block.title}</h3>
  22. <p class="teaser">{block.teaser}</p>
  23. </div>
  24. </div>
  25. </f:else>
  26. </f:if>
  27. </f:else>
  28. </f:if>
  29. </f:for>
  30. </div>

Das Ergebnis:

  1. <div class="service">
  2. <div class="col-4">
  3. <h3 class="title">...</h3>
  4. <p class="teaser">...</p>
  5. </div>
  6. <div class="col-8">
  7. <div class="col-4">
  8. <h5 class="title">...</h3>
  9. <p class="teaser">...</p>
  10. </div>
  11. <div class="col-4">
  12. <h5 class="title">...</h3>
  13. <p class="teaser">...</p>
  14. </div>
  15. </div>
  16. <div class="col-8">
  17. <div class="col-4">
  18. <h5 class="title">...</h3>
  19. <p class="teaser">...</p>
  20. </div>
  21. </div>
  22. </div>

Wie ihr seht, wird die letzte Column (col-4) aus der zweiten Column (col-8) herausgenommen und nochmal in eine weitere Column (col-8) gesteckt. Kann mir jemand sagen, was ich falsch mache und was ich ändern muss, damit ich mein gewünschtes Ergebnis erhalte?