CSS將左對齊和右對齊一個div，在每一行中切換它們？

Question

假設我們只使用CSS（不使用任何現有的CSS庫），這可能嗎？

有很多div（讓我們簡單地稱它們爲「行」）。

在每個div中，都有一個叫做「image」的div，一個叫做「text」。

的要求是這樣的：

我們不知道的總寬度（PIX而言），但我們想要的「形象」，採取空間（寬度）的50％，而「文」佔50％的寬度。它們之間會有一個20px的空白區域。

在奇數行（第1,3,5行）中，我們希望「圖像」位於左側，「文本」位於右側。

在偶數行（第2,4,6，...行）中，我們希望「圖像」位於右側，「文本」位於左側。

這可能嗎？

謝謝！

Answer 1

像這樣的東西？

編輯： 舊版瀏覽器（如IE9）不支持Flexbox。適用於所有主流瀏覽器。您可能還想添加vendor prefixes以便爲稍舊的瀏覽器提供服務。

.row{ 
 
    display:flex; 
 
    height:30px; 
 
    margin-bottom:10px; 
 
} 
 
.row img, .row p{ 
 
    flex:1; 
 
    
 
    } 
 

 
.row p{ 
 
    margin:0; 
 
    background:red; 
 
    } 
 
.row img{ 
 
    margin:0; 
 
    height:100%; 
 
    } 
 

 
.row:nth-of-type(2n){ 
 
    flex-direction:row-reverse; 
 
    } 
 

 

 
.row:nth-of-type(2n) img{ 
 
    margin-left:20px; 
 
    } 
 

 
.row:nth-of-type(2n-1) p{ 
 
    margin-left:20px; 
 
    }

<div class="rows"> 
 
<div class="row"> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 
 
    
 
    <p>Sample Text</p> 
 
</div> 
 
    <div class="row"> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 
 
    
 
    <p>Sample Text</p> 
 
</div> 
 
    <div class="row"> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 
 
    
 
    <p>Sample Text</p> 
 
</div> 
 
    <div class="row"> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 
 
    
 
    <p>Sample Text</p> 
 
</div> 
 
    <div class="row"> 
 
    <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 
 
    
 
    <p>Sample Text</p> 
 
</div> 
 
</div>