Question

所以我使用bootstrap以tile格式显示两个数据块我可以有一半的两半。在这种情况下右边我有一个图像，在左边我有一个显示文本和按钮的div。我打算让偶数行在左边有图像，在右边有奇数。因此，基本上图像将始终位于文本顶部和下方。在每一行中交替显示div。

使用javascript，blade，php或css我怎么能达到这个效果？

@foreach ($offers as $offer)
    <div class="offersNew">
    <div class="row row-equal-height">
        <div class="col-md-6 paddedCol6">
            <div class="inner">
                <h2 class="centered marginTop0">{{ $offer->title or 'No title' }}</h2>
                <h3 class="sub-header centered">{{ $offer->sub_header or '' }}</h3>

                <p class="centered">
                    {{ mb_strimwidth(strip_tags($offer->homepage_description), 0, 200, '...') }}
                </p>

                <div class="callToAction">
                    <center>
                    <a href="/offer/{{ $offer->slug or $offer->id }}">
                        <button class="buttonOne"><p class="sub-header line0 margin1 white smallerText">&nbsp;&nbsp;Let&apos;s Go!&nbsp;&nbsp;</p></button>
                    </a>
                    <a href="/offer/{{ $offer->slug or $offer->id }}">
                        <button class="buttonTwo"><p class="sub-header line0 margin1 blue smallerText">Other Offers</p></button>
                    </a>
                    </center>
                </div>

                @if ($offer->countdown == 1)
                    <div class="row countdown" data-timer="{{ $offer->end }}">
                        <h2 class="sub-header centered">
                            <span class="blueText">OFFER END</span>
                            <span class="days">0</span>:
                            <span class="hours">0</span>:
                            <span class="minutes">0</span>:
                            <span id="seconds"></span>
                            <span id="offerEndtime">0</span>
                        </h2>
                    </div>
                @endif

            </div>
        </div>
        <div class="col-md-6 main-background hidden-sm hidden-xs max400" style="background-image:url('{{ $offer->image or '' }}')">

        </div>
    </div>
</div>
@endforeach

Answer 1

添加一个计数变量并使用模数来交替。

$count = 0;

foreach($offers as $offer){
    if($count % 2 == 0){
        // show variation 1
    }else{
        // show variation 2
    }
    $count++;
}

foreach循环动态数据中的备用图像/文本位置

1 个答案: