All geek questions in one place

Reorder divs with CSS with dynamic height, vertical alignment of text

Here is my HTML code:

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

The expected result on the desktop:

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

width of each block: 50%, image width: 100% in the field, auto height; text in the middle of the field, for example display: table-cell; text alignment: center; Vertical Align: Medium;

and expected result on a mobile device:

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

all width: 100% per page

If I set the display to: flex to li, I can change the order of the even lines, however, I do not find a way to make the text box 100% height, the center of the text alignment. https://jsfiddle.net/wesleywai/phcgmopo/10/

display: table to lia nd display: table-cell div, 100% , , : https://jsfiddle.net/wesleywai/amm5mmvm/2/

: rtl; : ltr; , , .

, .

+4
4

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>
Hide result
+5

:

ul{
  display:block;
  margin:0;
  padding:0;
}
li{
  display:table;
  width:100%;
  height:auto;
}
div{
  display:table-cell;
  width:50%;
  text-align:center;
  vertical-align:middle;
  background:#fcc;
}
li:nth-child(even) {
  direction: rtl;
}
img{
  width:100%;
  display:block;
}
@media screen and (max-width: 768px) {
  li{
    display:block;
  }
  div{
    width:100%;
    display:block;
   }
  .txtBox{
    padding: 20px 0;
  }
}
<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>
Hide result
+2

CSS Flexbox.

<li> CSS Flexbox flex-direction: row-reverse, <li>.

align-self: stretch txtBox, 100% .

:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li.list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

/* Changing the order for every 'even' element */
li.list:nth-child(even) {
  flex-direction: row-reverse;
}

/* On Mobiles */
@media screen and (max-width: 767px) {
  li.list {
    flex-direction: column;
  }
  
  li.list:nth-child(even) {
    flex-direction: column;
  }
}

.txtBox {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: #eee;
}
<ul>
  <li class="list">
    <div class="imgBox"><img src="http://placehold.it/60/60"></div>
    <div class="txtBox">text 1</div>
  </li>
  <li class="list">
    <div class="imgBox"><img src="http://placehold.it/60/60"></div>
    <div class="txtBox">text 2</div>
  </li>
  <li class="list">
    <div class="imgBox"><img src="http://placehold.it/60/60"></div>
    <div class="txtBox">text 3</div>
  </li>
  <li class="list">
    <div class="imgBox"><img src="http://placehold.it/60/60"></div>
    <div class="txtBox">text 4</div>
  </li>
<ul>
Hide result

CSS Flexbox

, !

0

txtBox DIV, div

top: 50%;
transform: translateY(-50%);

, .

:
https://jsfiddle.net/gfd0ta98/

0

Source: https://habr.com/ru/post/1660617/

More articles:


All Articles