CSS - 如何更改divs的訂單

Question

我有一個顯示圖像和文本的div，我用foreach加載內容，我需要在第二行的foreach中反轉訂單div。

第一個div所示：

Image - Text 

第二個div表示：

Text - Image 

例如：

.content 
 
{ 
 
    width:100%; 
 
    height: 200px; 
 
} 
 

 
.content .image, .content .text 
 
{ 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
.content .image img 
 
{ 
 
    width:100%; 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>

釷ANK你

Answer 1

你可以這樣做至少有2個選項使用使用浮動Flexbox，就見下文

.content { 
 
    width: 100%; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 

 
.content .image, 
 
.content .text { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.content .image img { 
 
    width: 100%; 
 
} 
 

 
.content:nth-child(even) { 
 
    flex-direction: row-reverse 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>

2.

1：右見下文

.content { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.content .image, 
 
.content .text { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.content .image img { 
 
    width: 100%; 
 
} 
 

 
.content:nth-child(even) .image{ 
 
    float:right; 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>