在交替行上交換列（左/右）

Question

我有一系列行，每行包含兩列，寬度爲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; 
     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> 

我知道我可以Flexbox的，我不能在這個項目中使用做到這一點。並且使用float: left不允許我垂直對齊元素。我還有什麼其他選擇？

注意：我對這些列使用display: inline-block，因爲它們的高度不同，我希望它們彼此垂直對齊。

編輯：我已經made a CodePen與使用浮動如上所示的示例。

Answer 1

你可以使用display:table（optionnal），:nth-child(even)和direction交換DIV位置： 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>

Answer 2

試試這個：

/* CSS */ 
 

 
.row .image { 
 
    display: table-cell 
 
} 
 
.row .text { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.row:nth-child(even) .image { 
 
    float: right; 
 
} 
 
.row { 
 
    clear: both; 
 
}

這裏是一個工作plunker

Answer 3

我真的不明白你的意思了 「垂直對齊彼此」。如何完全一致？

但也許你想要使用vertical-align: middle垂直對齊它們，然後，是的，float: left不是你的朋友。

你說你的專欄的寬度是50/50。然後，您可以使用position: relative與left: 50%;和right: 50%;規則。

像這樣：

.row { 
    display: block; 
    position: relative; 
} 

.row > .image { 
    display: inline-block; 
    position: relative; 
    width: 50%; 
    background-color: #eef; 
    vertical-align: middle; 
} 
.row > .text { 
    display: inline-block; 
    position: relative; 
    width: 50%; 
    background-color: #fee; 
    vertical-align: middle; 
} 

.row:nth-child(even) > .image { 
    left: 50%; 
} 
.row:nth-child(even) > .text { 
    right: 50%; 
} 

的背景顏色只是爲了演示。

這樣每個偶數行都會交換列，您仍然可以使用vertical-align規則。請參閱plunker。