Question

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

我希望每一行都将左列（next(file)）交换到右侧，但我需要在HTML中维护序列，因为它在较小的屏幕上显示为一列。

CSS：

.image

HTML：

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

}

我知道我可以用flexbox做到这一点，我不能在这个项目中使用它。使用<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>不允许我垂直对齐元素。我还有其他选择吗？

NB：我正在使用float: left这些列，因为它们的高度不同，我希望它们彼此垂直对齐。

修改：我made a CodePen使用了如上所示的浮动示例。

Answer 1

您可以使用display:table （optionnal），: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

试试这个：

＆＃13;

<table>
  <tr>
    <td width="60px">test:</td>
    <td>
      <div class="inner">
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
      </div>
      <div class="inner">
        <div class="shift shift1"></div>
        <div class="shift shift2"></div>
      </div>
    </td>
  </tr>
</table>

＆＃13;

这是一个有效的plunker

Answer 3

我真的不明白你的意思是＆＃34;彼此垂直对齐＆＃34;。如何准确对齐？

但也许您想使用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。

在备用行上交换列（左/右）

3 个答案: