垂直方向に2つの異なるクラスをCSSの隣に配置します

Question

2つのdivを異なるクラスに揃えるにはどうすればよいですか？

私は、次のコードをお持ちの場合：私はお互いの隣DIV1とDIV3を揃えることができる方法

<div class="div1"> 
</div> 
<div class="div2"> 
</div> 
<div class="div3"> 
</div> 

を？ div1以上？それはHTMLとCSSだけで可能ですか？事前

Answer 1

で おかげでフレキシボックスコンテナでそれらをラップし、要素のorderを変更：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container > div { 
 
    line-height: 40px; 
 
    text-align: center; 
 
} 
 

 
.div1 { 
 
    order: 1; 
 
    width: 50%; 
 
    background: red; 
 
} 
 

 
.div2 { 
 
    order: 3; 
 
    width: 100%; 
 
    background: blue; 
 
} 
 

 
.div3 { 
 
    order: 2; 
 
    width: 50%; 
 
    background: yellow; 
 
}

<div class="container"> 
 
    <div class="div1"> 
 
    1 
 
    </div> 
 
    <div class="div2"> 
 
    2 
 
    </div> 
 
    <div class="div3"> 
 
    3 
 
    </div> 
 
</div>

Answer 2

はあなただけで、コンテナ内のすべてのdivのを配置することはできません100％の幅とテキストの整列を行う：中心？

シンプルjFiddle

.container { 
    width:100%; 
    text-align:center; 
}