Answers.Body: <p>Personally I'd do this in pure CSS. e.g.,</p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;img ... /&gt;
      &lt;div class="text"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
      &lt;img ... /&gt;
      &lt;div class="text"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.item {
      overflow: hidden; // expand around floated children
  }
  img {
      float: left; width: 50%;
  }
  .text {
      float: right; width: 50%;
  }
  
  .item:nth-of-type(2n) img {
      float: right;
  }
  .item:nth-of-type(2n) .text {
      float: left;
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-12-06T18:10:56.633Z
Answers.LastActivityDate: 2015-12-06T18:10:56.633Z
Answers.UserDisplayName: Matt Wilcox
Body: <p>I'm a new user so I really don't know how to do this.</p>
  
  <p>I want to create a template that displays the results of a "news" type entry in alternating rows - image on left/text on right - image on right/text on left.</p>
  
  <p>Could someone help in explaining where to put the code and what the code should be?</p>
  
Tags: <templating>
Title: How do you create an alternating layout in a template? i.e. an image on right then an image on left
ThreadText: # How do you create an alternating layout in a template? i.e. an image on right then an image on left
  
  (Asked by: username_0 on 2015-12-06)
  
  I'm a new user so I really don't know how to do this.
  
  I want to create a template that displays the results of a "news" type entry in alternating rows - image on left/text on right - image on right/text on left.
  
  Could someone help in explaining where to put the code and what the code should be?
  
  **Tags:** templating
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-12-06. Score: 3
  
  Personally I'd do this in pure CSS. e.g.,
  
  ```
  <div class="item">
      <img ... />
      <div class="text">
          ...
      </div>
  </div>
  <div class="item">
      <img ... />
      <div class="text">
          ...
      </div>
  </div>
  
  ```
  
  CSS:
  
  ```
  .item {
      overflow: hidden; // expand around floated children
  }
  img {
      float: left; width: 50%;
  }
  .text {
      float: right; width: 50%;
  }
  
  .item:nth-of-type(2n) img {
      float: right;
  }
  .item:nth-of-type(2n) .text {
      float: left;
  }
  
  ```
  
  
  ---
  
  