在交替行上交换列（左/右）

Question

我有一系列行，每行包含两列，宽度为 50/50。

我希望每隔一行将左列 (.image) 向右交换，但我需要保持 HTML 中的顺序，因为它在较小的屏幕上显示为一列。

CSS：

ul {
  list-style: none;
  padding-left: 0;
}

.row {
  text-align: center;
}

@media (min-width: 768px) {

  .image,
  .text {
      display: inline-block;
      width: 50%;
      vertical-align: middle;
  }

  /* alternate */
  .row:nth-child(odd) .image {
    float: right;
  }

  /* clearfix */
  .row:before,
  .row:after {
      content: " ";
      display: table;
  }

  .row:after {
      clear: both;
  }

}

HTML：

<ul>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
  </div>
  </li>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div><div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
</ul>

我知道我可以用 flexbox 做到这一点，但我不能在这个项目中使用它。并且使用float: left 不允许我垂直对齐元素。我还有哪些其他选择？

注意：我将display: inline-block 用于这些列，因为它们的高度各不相同，我希望它们彼此垂直对齐。

编辑：我已经made a CodePen 使用如上所示的浮动示例。

Answer 1

您可以使用display:table（可选）、:nth-child(even) 和 direction 来交换 div 位置： codepen

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}
.row {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.row:nth-child(even) {
  direction: rtl;
}
.row:nth-child(odd) .image {
  text-align: right
}
.image,
.text {
  display: table-cell;
  direction: ltr;
  border: solid;
}
.text {
  background: tomato;
}
img {vertical-align:top;}
@media screen and (max-width: 640px) {
  .row,
  .image,
  .text {
    display: block;
    direction:ltr
  }
  .row:nth-child(odd) .text {
  text-align: right
}
}

<ul>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>

  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
  <li class="row">
    <div class="image">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="text">
      <p>Lorem ipsum</p>
    </div>
  </li>
</ul>

Answer 2

试试这个：

/* CSS */

.row .image {
   display: table-cell
}
.row .text {
   display: table-cell;
   vertical-align: top;
}
.row:nth-child(even) .image {
   float: right;
}
.row {
   clear: both;
}

这是一个有效的plunker

Answer 3

我不太明白您所说的“垂直对齐”是什么意思。究竟是如何对齐的？

但也许您想使用 vertical-align: middle 将它们垂直对齐，然后，是的，float: left 不是您的朋友。

您说您的列的宽度为 50/50。然后您可以将position: relative 与left: 50%; 和right: 50%; 规则一起使用。

像这样：

.row {
  display: block;
  position: relative;
}

.row > .image {
  display: inline-block;
  position: relative;
  width: 50%;
  background-color: #eef;
  vertical-align: middle;
}
.row > .text {
  display: inline-block;
  position: relative;
  width: 50%;
  background-color: #fee;
  vertical-align: middle;
}

.row:nth-child(even) > .image {
  left: 50%;
}
.row:nth-child(even) > .text {
  right: 50%;
}

背景色只是为了演示。

这样每个偶数行都会交换列，您仍然可以使用vertical-align 规则。请参阅plunker。