Изменение порядка Div с помощью CSS с динамической высоты, текст вертикальной выравнивания средней

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% к коробке, авто высота; текст в середине окна, например дисплей: table-cell; выравнивания текста: центр; вертикально-Align: средний;

и ожидаемый результат на мобильный телефон является:

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

все ширина: 100% на страницу

Если установить дисплей: Flex с Li, можно изменить порядок даже Роу, однако, я не нахожу способ сделать текстовое поле 100% высоты, центр выравнивания текста. https://jsfiddle.net/wesleywai/phcgmopo/10/

Если я использую дисплей: таблицу Лии го дисплея: стол-клетку Див, я могу сделать это 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>

Answer 2

Вы можете использовать CSS Flexbox.

Для изменения порядка каждой секунды <li> вы можете использовать свойство flex-direction: row-reverse CSS Flexbox, которое изменит порядок элементов <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>

Узнайте больше о CSS Flexbox

Надежда это помогает!

Answer 3

Если вы не возражаете, обертывания содержания txtBox в другой DIV, вы можете установить содержимое этого Div с

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

Для того, чтобы убедиться, что он центрируется по вертикали.

Вот рабочий пример:
https://jsfiddle.net/gfd0ta98/

Answer 4

Мое решение с таблицей отображения:

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>