使用具有动态高度的CSS更改div的顺序,文本垂直对齐中间

Question

这是我的HTML代码:

<ul>
  <li>
    <div class="imgBox"><img 1></div>
    <div class="txtBox">text 1</div>
  </li>
  <li>
    <div class="imgBox"><img 2></div>
    <div class="txtBox">text 2</div>
  </li>
  <li>
    <div class="imgBox"><img 3></div>
    <div class="txtBox">text 3</div>
  </li>
  <li>
    <div class="imgBox"><img 4></div>
    <div class="txtBox">text 4</div>
  </li>
<ul>

桌面的预期结果是:

_____________________
|  img 1  |  txt 1  |
_____________________
|  txt 2 |   img2   |
_____________________
|  img 3  |  txt 3  |
_____________________
|  txt 4  |  img 4  |
_____________________

每个块宽:50%,图像宽度:100%到盒子,自动高度; 文本在框的中间,如display:table-cell; 文本对齐:中心; 垂直对齐:中部;

移动设备的预期结果是:

___________
|  img 1  |
___________
|  txt 1  |
___________ 
|  img 2  |
___________
|  txt 2  |
___________ 
|  img 3  |
___________
|  txt 3  |
___________ 
|  img 4  |
___________
|  txt 4  |
___________

一切都是宽度:100%到页面

如果我设置display:flex to li,我可以改变偶数行的顺序,但是,我没有找到使文本框100%高度,文本对齐中心的方法. https://jsfiddle.net/wesleywai/phcgmopo/10/

如果我使用display:table to lia nd display:table-cell to div,我可以像原生表格一样使它达到100%高度,但我找不到更改顺序的方法:https: //jsfiddle.net/ wesleywai/amm5mmvm/2 /

我也试过方向:rtl; 和方向:ltr; 它似乎不适用于我的情况.

请帮忙.

Answer 1

掉落height: 100%的div规则

您可以删除vertical-align:middle;它,因为它在这种情况下没有效果,如果您想垂直居中文本,我添加了一个新规则

.txtBox {
  display:flex;
  justify-content: center;
  align-items: center;
}

ul{
  display:block;
  margin:0;
  padding:0;
}
li{
  display:flex;
  width:100%;
  height:auto;
}
div{
  display:block;
  width:50%;
  text-align:center;
  background:#fcc;
}
.txtBox {
  display:flex;
  justify-content: center;     /*  horizontal - when flex row */
  align-items: center;         /*  vertical   - when flex row */
}
li:nth-child(even) .imgBox{
  order:2;
}
img{
  width:100%;
  height:auto;
  display:block;
}
@media screen and (max-width: 68px) {
  li{
    display:block;
  }
  div{
    width:100%
   }
  .txtBox{
    padding:20px;
    width:calc(100% - 40px);
  }
}

<ul>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 1
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 2
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'>
    </div>
    <div class="txtBox">
      FLOWER 3
    </div>
  </li>
  <li>
    <div class="imgBox">
      <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'>
    </div>
    <div class="txtBox">
      FLOWER 4
    </div>
  </li>
</ul>