在备用行上交换列(左/右)

时间:2016-10-09 01:04:06

标签: html css layout grid

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

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

试试这个:

&#13;
&#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;
&#13;
&#13;

这是一个有效的plunker

答案 2 :(得分:1)

我真的不明白你的意思是&#34;彼此垂直对齐&#34;。如何准确对齐?

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

你说你的列的宽度是50/50。然后,您可以将position: relativeleft: 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