Html 交换交替行上的列（左/右）

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

我希望每隔一行将左边的列（

.image

）交换到右边，但我需要在HTML中保持序列，因为它在较小的屏幕上显示为一列

CSS:

HTML:

同侧眼睑



同侧眼睑



同侧眼睑

我知道我可以用flexbox做这件事，但我不能在这个项目中使用。使用

float:left

无法垂直对齐元素。我还有其他选择吗

NB:我正在为这些列使用

display:inline block

，因为它们的高度不同，我希望它们彼此垂直对齐

编辑：我已经使用如上所示的浮动对示例进行了演示。

尝试以下操作：

/*CSS*/
.行.图像{
显示：表格单元格
}
.行.文本{
显示：表格单元格；
垂直对齐：顶部；
}
.row:n个子级（偶数）。图像{
浮动：对；
}
.行{
明确：两者皆有；
}

我真的不明白你所说的“垂直对齐”是什么意思。如何精确对齐

但是，也许您想使用

垂直对齐：中键将它们垂直对齐，然后，是的，
float:left
不是您的朋友

您说您的列在宽度上拆分为50/50。然后您可以使用
位置：相对
和
左：50%和<代码>右侧：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%;
}

背景色仅用于演示

这样，每个偶数行将交换列，并且您仍然可以使用
垂直对齐
规则。请参阅。
您可以使用
显示：表
（可选）、
：第n个子项（偶数）
和
方向
来交换div位置：


ul{
保证金：0；
填充：0；
宽度：100%；
}
.行{
宽度：100%；
显示：表格；
表布局：固定；
}
.行：第n个子项（偶数）{
方向：rtl；
}
.行：第n个子项（奇数）。图像{
文本对齐：右对齐
}
.图像，
.文本{
显示：表格单元格；
方向：ltr；
边框：实心；
}
.文本{
背景：番茄；
}
img{垂直对齐：顶部；}
@媒体屏幕和屏幕（最大宽度：640像素）{
一行
.图像，
.文本{
显示：块；
方向：ltr
}
.行：第n个子项（奇数）.文本{
文本对齐：右对齐
}
}


同侧眼睑



同侧眼睑



同侧眼睑


请显示您的完整代码（包括CSS），我已经用CSS和代码笔对其进行了更新，谢谢。这似乎是一个很好的答案。但是OOP说不能使用float-lef（我不明白为什么），而您使用的是float-right…使用float不允许我允许列垂直对齐，即使用
垂直对齐：middle
或诸如此类。你可以在我用CSS和代码笔更新的帖子中看到这个问题。我刚才接受的答案在这个问题上是有效的。这非常有效。如果将
vertical align:middle
添加到
.image、.text
中，则内容也会垂直居中，这是我无法使用最简单的修复方法做到的：
float:right
–感谢您提供的巧妙解决方案！我应该说“对齐中间”来暗指我正在寻找的
垂直对齐：中间。我已经用CSS和代码笔更新了我的原始帖子。@Benji，然后我就可以猜到你想要什么了。：）你试过我的css或plunker吗？它可以按你的意愿工作<代码>位置：具有左/右50%偏移量的相对
。但是@GCyrillus使用
方向的解决方案
我更喜欢，因为它甚至可以应用于可变宽度元素。是的，我做了，谢谢！它确实做了我需要的，因为我知道宽度。但我发现@GCyrillus的解决方案非常聪明，我还是选择了：）
<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>

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