如何在CSS中制作交替图像的行和列->文本，文本->图像？

Question

我正在尝试在网站上创建一个布局，该布局将交替显示图像->文本，文本->逐行显示图像。我希望图像占33％，文本占66％。我用flexbox和grid尝试了几种不同的方法，但无法做到这一点。我觉得它应该相对简单一些，并且可能考虑过度了。

   _______
  |       |         Title A
  | IMAGE |     text text text
  |___A___|     text text text

                     _______
      Title B       |       |
  text text text    | IMAGE |
  text text text    |___B___|

   _______
  |       |         Title C
  | IMAGE |     text text text
  |___C___|     text text text

使用flex，grid，或者完全不做其他事情都是最好的吗？

Answer 1

这是我可以根据您的输入提供帮助的最简单的解决方案。

.row{
  display:flex;
}
.row>div{
  padding:15px;
}
.text{
  width:66.6666%
}
.image{
  width:33.333%
}
.container .row:nth-child(2n+1){
  flex-direction:row-reverse
}

<div class="container">
  <div class="row">
    <div class="text">text</div>
    <div class="image">image</div>
  </div>
  <div class="row">
    <div class="text">text</div>
    <div class="image">image</div>
  </div>
  <div class="row">
    <div class="text">text</div>
    <div class="image">image</div>
  </div>
  <div class="row">
    <div class="text">text</div>
    <div class="image">image</div>
  </div>
</div>