CSS对齐一个div左右一个，在每一行中切换它们？

Question

假设我们只使用CSS（不使用任何现有的CSS库），这可能吗？

有很多div（让我们简单地称它们为“行”）。

在每个div中，有一个名为“image”的div，一个名为“text”。

要求如下：

我们不知道总宽度（以像素为单位），但我们希望“图像”占据空间（宽度）的50％，而“文本”占据宽度的50％。并且它们之间将有20px的空白区域。

在奇数行（第1,3,5行......）中，我们希望“图像”在左侧，“文本”在右侧。

在偶数行（第2,4,6，...行）中，我们希望“图像”位于右侧，“文本”位于左侧。

这可能吗？

谢谢！

Answer 1

这样的东西？

修改 IE9等旧版浏览器不支持Flexbox。适用于所有主流浏览器。您可能还想添加vendor prefixes以便为较旧的浏览器提供服务。

＆＃13;

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;