交互の行で列を（左/右に）入れ替えます。

Question

2列の列を50/50の幅に分割した一連の行があります。

他のすべての行が右の列に左の列（.image）を入れ替えることを望みますが、小さな画面に1列として表示されるため、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> 

私は私がこのプロジェクトに使用することはできませんフレキシボックス、でこれを行うことができます知っています。 float: leftを使用しても、要素を垂直に配置することはできません。その他の選択肢は何ですか？

NB：これらの列には高さが異なるため、これらの列には垂直方向に整列させたいので、display: inline-blockを使用しています。

編集：私はmade a CodePenを使用しています。上記のように浮動小数点数を使用しています。

Answer 1

あなたはdivの位置を交換するためにdisplay:table（optionnal）、:nth-child(even)とdirectionを使用することがあります。 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を参照してください。