在交替行上交换列（左/右） [英] Swapping columns (left / right) on alternate rows

问题描述

我有一系列的行，每行包含两列，宽度为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 ; 
宽度：50％; 
 vertical-align：middle; 
} 
 
 / *替换* / 
 .row：n-child（奇数）.image {
 float：right; 
} 
 
 / * clearfix * / 
 .row：之前，
 .row：之后{
 content：; 
 display：table; 
} 
 
 .row：在{
之后：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 ，因为它们的高度有所不同，我希望它们可以垂直对齐。

编辑：我已经制作了一个CodePen ，上面显示了使用浮动的示例。

解决方案

您可以使用 display：table （optionnal） code>：nth-​​child（偶数）和方向交换div位置：
codepen

  ul {margin：0;填充：0; width：100％;}。row {width：100％;显示：表格; row：nth-​​child（偶数）{direction：rtl;}。row：nth-​​child（odd）.image {text-align：right} .image，.text {display：table-细胞;方向：ltr; border：solid;}。text {background：tomato;} img {vertical-align：top;} @ media screen and（max-width：640px）{.row，.image，.text {display：block;方向：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 class =row> < div class =image> < img src =http://placehold.it/350x150> < / DIV> < div class =text> < p> Lorem ipsum< / p> < / DIV> < /锂> < li class =row> < div class =image> < img src =http://placehold.it/350x150> < / DIV> < div class =text> < p> Lorem ipsum< / p> < / DIV> < / li>< / ul>  

I have a series of rows, each containing two columns, split 50/50 in width.

I'd like every other row to swap the left column (.image) to the right right, but I need to maintain the sequence in the HTML as it's displayed as one column on smaller screens.

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>

I know I can do this with flexbox, which I can't use in this project. And using float: left doesn't allow me to vertically align the elements. What other options do I have?

NB: I'm using display: inline-block for these columns, as they vary in height and I'd like them to be aligned vertically to one another.

Edit: I've made a CodePen with the example using floats as shown above.

解决方案

you may use display:table(optionnal), :nth-child(even) and direction to swap div position : 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>

这篇关于在交替行上交换列（左/右）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！