左右交替文章

我會有文章在頁面上，應該有交替，所以第一篇在左邊，第二篇在右邊

現在，在示例中，我將所有文章顯示兩次，分別在左側和右側

如何進行交替而不顯示不必要的？

<div class="container">
    <div class="article-list">
        <div class="article article--left">
            <h2 class="article_title">Article 1 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 1 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 2 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 2 (r)</h2> 
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 3 (l)</h2> 
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 3 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 4 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 4 (r)</h2>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

這里有一些簡單的 CSS 可能會讓你朝著正確的方向開始：

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

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

注意display屬性：

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

桌子

這些元素的行為類似于 HTML 元素。它定義了一個塊級框。

建議：

您可能還想考慮使用像Bootstrap這樣的框架來簡化“格式化”和“布局”。

uj5u.com熱心網友回復：

通過nth-child您可以選擇必要的元素并隱藏它們

.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 class="container">
    <div class="article-list">
        <div class="article article--left">
            <h2 class="article_title">Article 1 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 1 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 2 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 2 (r)</h2> 
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 3 (l)</h2> 
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 3 (r)</h2>
        </div>
        
        <div class="article article--left">
            <h2 class="article_title">Article 4 (l)</h2>
        </div>

        <div class="article article--right">
            <h2 class="article_title">Article 4 (r)</h2>
        </div>
    </div>
</div>

如果您使用的是php，您可以試試這個

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

            <div class="article article--right">
                <h2 class="article_title">{{ $article->title }}</h2>
            </div>
        <?php endif; ?>
    </div>
<?php endforeach; ?>

標籤：html css

上一篇：jQuery學習筆記

下一篇：如何在css中創建一個高邊和低邊的矩形