Introduction: I publish articles on the site and on the main page they are displayed (the picture is on the left side and a short text from the Right!) And all one after the other is a picture on the left and the text on the right would like that:

One article is a picture from the left and the text is on the right and the next is the other way round on the right side and the text is on the left!

  • What code is there at the moment? - Regent
  • Solved the problem like this <?php $fSchet = 0; ?> <?php $fSchet = 0; ?> <?php $fShet++; echo ($fShet % 2) ? "myFloatLeft" : "myFloatRight";?> <?php $fShet++; echo ($fShet % 2) ? "myFloatLeft" : "myFloatRight";?> <?php $fShet++; echo ($fShet % 2) ? "myFloatLeft" : "myFloatRight";?> - Mikhail Volkov

2 answers 2

$ i - article index. $ align - position

 $align = ($i % 2) ? "left" : "right";

Well, somehow, based on the information provided.

  • Thank you very much found the same solution in one forum. - Mikhail Volkov

Like this?

 img{max-width:100%;} #articles section{width:100%} #articles section:nth-child(2n+1)>div{float:right;} #articles section:nth-child(2n)>div{float:left;} #articles section div.img{width:30%} #articles section div.text{width:70%} 
 <div id="articles"> <section> <div class="img"> <img src="http://psd.by/wp-content/uploads/2011/02/twitterman256.png"> </div> <div class="text"> <h1>Title1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae dolorum pariatur ipsa ut dicta maxime quisquam incidunt eligendi doloremque earum molestiae dignissimos magni deleniti quaerat accusantium numquam a facilis quibusdam.</p> </div> </section> <section> <div class="img"> <img src="http://fc01.deviantart.net/fs70/f/2011/142/4/c/twitter_icon_by_ariimage-d3gxs23.png"> </div> <div class="text"> <h1>Title2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit error voluptatibus harum dignissimos facilis pariatur sit ipsa porro non quam voluptatum soluta suscipit veritatis laudantium doloremque perferendis veniam corporis vel.</p> </div> </section> <section> <div class="img"> <img src="http://netbu.ru/wp-content/uploads/2012/03/zloi.jpg" alt=""> </div> <div class="text"> <h1>Title3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum non eveniet molestiae ipsum suscipit molestias saepe sit accusantium enim labore quasi dolor quam qui consequuntur quae voluptatum possimus veritatis quidem.</p> </div> </section> </div>

  • Well, it turned out that php here and can not interfere. Output the standard template, and css will finish everything - sepgg
  • In IE8 it won't take off if it matters. - Sergey Snegirev
  • I agree ... then change the section to a div and add the class left or right by the above published method. Well, in css instead of nth-child - .left or .right - sepgg