我有一系列的行,每行包含两列,宽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的例子使用浮点数如上所示。

最佳答案

您可以使用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>

10-05 20:56
查看更多