我希望數(shù)組 1,3,5,7,9 布局將從數(shù)組 0,2,4,6,8,10 反轉(zhuǎn)，例如第一行布局 - 左側(cè)的圖像和右側(cè)的描述，第二行的布局 - 圖像在右邊和左邊的描述，并不斷。這是我的function.php代碼<?php foreach ( $termchildren as $child ) { $term = get_term_by( 'id', $child, $taxonomy_name ); $image = get_field('featured_image', $term); ?> <div class="row"> <div id="product-cat <?php echo $term->slug ?>"> <div class="two-col product-cat-image"> <img src="<?php echo $image ?>"> </div> <div class="two-col product-cat-details"> <?php echo '<h4>'. $term->name .'</h4>'; echo '<p>'. $term->description .'</p>'; echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>'; ?> </div> </div> </div><?php } ?>CSS代碼：.row{ display: flex; margin-left: -10px; margin-right: -10px; margin-bottom: 15px;}.row .col { flex: 1; padding-right: 10px; padding-left: 10px;}結(jié)果還是這樣我的期望是這樣的：
3 回答
拉莫斯之舞
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個贊
我們只需要更改function.php中的代碼，如下所示。
<?php
$i=0;
foreach ( $termchildren as $child ) {
$term = get_term_by( 'id', $child, $taxonomy_name );
$image = get_field('featured_image', $term);
if($i % 2){ ?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div id="product-cat <?php echo $term->slug ?>">
<div class="two-col product-cat-details">
<?php
echo '<h4>'. $term->name .'</h4>';
echo '<p>'. $term->description .'</p>';
echo '<a class="product-cat-button" href="' . get_term_link( $child, $taxonomy_name ) . '">See Products</a>';
?>
</div>
<div class="two-col product-cat-image">
<img src="<?php echo $image ?>">
</div>
</div>
</div>
<?php }
$i++;
}
?>
希望現(xiàn)在你得到了所有的東西，讓我知道還有什么需要幫助的。
汪汪一只貓
TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個贊
您需要添加以下 css 以實(shí)現(xiàn)所需的輸出：
當(dāng).product-cat發(fā)現(xiàn)奇數(shù)div 適用order: 1;于圖像容器（.product-cat-image）和order: 2;細(xì)節(jié)容器（.product-cat-details）
當(dāng).product-cat找到的 div 也適用order: 2;于圖像容器（.product-cat-image）和order: 1;細(xì)節(jié)容器（.product-cat-details）
.product-cat:nth-child(odd) .product-cat-image{
-webkit-order: 1;
order: 1;
}
.product-cat:nth-child(odd) .product-cat-details{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-image{
-webkit-order: 2;
order: 2;
}
.product-cat:nth-child(even) .product-cat-details{
-webkit-order: 1;
order: 1;
}
- 3 回答
- 0 關(guān)注
- 279 瀏覽
添加回答
舉報(bào)
0/150
提交
取消