vertikal ausrichten zwei verschiedene Klassen nebeneinander mit CSS

Question

Wie kann ich zwei divs mit verschiedenen Klassen zusammen über einem anderen ausrichten?

Wenn ich den folgenden Code:

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

wie kann ich ausrichten div1 und div3 nebeneinander? und über dem div1? Ist es nur mit HTML und CSS möglich? Dank im Voraus

Answer 1

sie Wickel mit einem Flexbox Behälter, und ändern Sie die order der Elemente:

.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

Können Sie nicht nur Platz, die alle divs in einem Behälter, der ist 100% Breite und eine Textausrichtung: Mitte?

Einfach jFiddle für Sie.

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