html – 用CSS动态高度改变div的顺序,文本垂直对齐中间

概述这是我的 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> 这是我的 HTML代码：

<ul>  <li>    <div ><img 1></div>    <div >text 1</div>  </li>  <li>    <div ><img 2></div>    <div >text 2</div>  </li>  <li>    <div ><img 3></div>    <div >text 3</div>  </li>  <li>    <div ><img 4></div>    <div >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设置为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;它似乎不适用于我的情况.

请帮忙.

解决方法 降低高度：div规则的100％

你可以放下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 >      <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'>    </div>    <div >      FLOWER 1    </div>  </li>  <li>    <div >      <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'>    </div>    <div >      FLOWER 2    </div>  </li>  <li>    <div >      <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'>    </div>    <div >      FLOWER 3    </div>  </li>  <li>    <div >      <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'>    </div>    <div >      FLOWER 4    </div>  </li></ul>

总结

以上是内存溢出为你收集整理的html – 用CSS动态高度改变div的顺序,文本垂直对齐中间全部内容，希望文章能够帮你解决html – 用CSS动态高度改变div的顺序,文本垂直对齐中间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。