Alternate articles between left and right-CodePudding

I will have articles on the page, and there should be alternation, so the first article goes on the left, the second on the right

Now, in the example, I have all the articles displayed twice, both on the left and on the right

How can I make alternation and not display unnecessary ones?

<div >
    <div >
        <div >
            <h2 >Article 1 (l)</h2>
        </div>

        <div >
            <h2 >Article 1 (r)</h2>
        </div>
        
        <div >
            <h2 >Article 2 (l)</h2>
        </div>

        <div >
            <h2 >Article 2 (r)</h2> 
        </div>
        
        <div >
            <h2 >Article 3 (l)</h2> 
        </div>

        <div >
            <h2 >Article 3 (r)</h2>
        </div>
        
        <div >
            <h2 >Article 4 (l)</h2>
        </div>

        <div >
            <h2 >Article 4 (r)</h2>
        </div>
    </div>
</div>

CodePudding user response：

Here's some simple CSS that might get you started in the right direction:

<style>
.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
<div >
  <div >Article 1 (l)</div>
  <div >Article 1 (r)</div>
</div>
<div >
  <div >Article 2 (l)</div>
  <div >Article 2 (r)</div>
</div>

Note the display attribute:

https://developer.mozilla.org/en-US/docs/Web/CSS/display

table

These elements behave like HTML elements. It defines a block-level box.

SUGGESTION:

You might also want to consider using a framework like Bootstrap to simplify "formatting" and "layout".

CodePudding user response：

Through nth-child you can select the necessary elements and hide them

.article:nth-child(2) {display: none;}
.article:nth-child(3) {display: none;}
.article:nth-child(6) {display: none;}
.article:nth-child(7) {display: none;}

<div >
    <div >
        <div >
            <h2 >Article 1 (l)</h2>
        </div>

        <div >
            <h2 >Article 1 (r)</h2>
        </div>
        
        <div >
            <h2 >Article 2 (l)</h2>
        </div>

        <div >
            <h2 >Article 2 (r)</h2> 
        </div>
        
        <div >
            <h2 >Article 3 (l)</h2> 
        </div>

        <div >
            <h2 >Article 3 (r)</h2>
        </div>
        
        <div >
            <h2 >Article 4 (l)</h2>
        </div>

        <div >
            <h2 >Article 4 (r)</h2>
        </div>
    </div>
</div>

If you are using php you can try this

<?php foreach ($articles as $index => $article): ?>
    <div >
        <?php  if ($index % 2 === 1): ?>
            <div  >
                <h2 >{{ $article->title }}</h2>
            </div>
            
        <?php else: ?>

            <div >
                <h2 >{{ $article->title }}</h2>
            </div>
        <?php endif; ?>
    </div>
<?php endforeach; ?>