Stapeln von Boxen in HTML und CSS

Question

Ich wollte drei Boxen erstellen und sie richtig ausrichten. Es wären zwei Boxen in einer Reihe und eine dritte Box unter der zweiten Box. Die zweite und dritte Box hätte die gleiche Höhe wie die erste Box. sehen Sie können visuell, was ich versuche, hier zu tun: http://codepen.io/sibraza/pen/KMzwWR

Hier ist ein Beispiel dafür, was ich versuche zu erreichen:

Snippet:

.block { 
 
    float: left; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
    margin-left: 300px; 
 
    margin-top: 200px; 
 
} 
 
.block2 { 
 
    float: left; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 250px; 
 
    margin-top: 200px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
} 
 
.block3 { 
 
    float: left; 
 
    margin: auto; 
 
    width: 250px; 
 
    height: 200px; 
 
    margin-top: 290px; 
 
    border: 3px solid #73AD21; 
 
    padding: 10px; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

Flexbox kann das mit einem Wrapper für die rechten Seite divs

tun

* { 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    display: flex; 
 
} 
 
div { 
 
    border: 1px solid #73AD21; 
 
} 
 
.block { 
 
    height: 200px; 
 
} 
 
.row > div { 
 
    flex: 1; 
 
} 
 
.col-wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.col-wrap > div { 
 
    flex: 1; 
 
}

<div class="container-fluid"> 
 

 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-wrap"> 
 
     <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
     </div> 
 
     <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div>

Answer 2

Der einfachste Weg, dies zu sortieren ist, die größer div haben ont er wie angeboten lassen, und einen Container Div für die zwei auf der rechten Seite zu erstellen. so dass die CSS würde so somehting sein:

.block_on_the_left { 
    float:left; 
    width:50%; 
} 
#container_on_the_right { 
    float:left; 
    width:50%; 
} 
.block2 { 
    width:100%; 
} 
.block3 { 
    width:100%; 
} 

Ihre HTML müßten sein:

<div class="block_on_the_left"> 
    some stuff here for the left bit 
</div> 
<div id="container_on_the_right"> 
     <div class=".block2"> 
      some stuff 
     </div> 
     <div class=".block3"> 
      some more stuff 
     </div> 
    </div> 

Der Behälter hält sowohl die kleinere divs im Innern, und sie gruppiert.

Answer 3

Hier ist eine einfache Lösung mit Flex-Box.

Hoffe, das wird helfen. Thanks :)

.row{ 
 
    display: flex; 
 
} 
 

 
.block { 
 
    width: 250px; 
 
    height: 400px; 
 
    border: 3px solid red; 
 
    box-sizing: border-box; 
 
    } 
 
    .block2 { 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid #73AD21; 
 
    box-sizing: border-box; 
 
    } 
 
    .block3 { 
 
    width: 250px; 
 
    height: 200px; 
 
    border: 3px solid blue; 
 
    box-sizing: border-box; 
 
    align-self: flex-end; 
 
    margin-left: -250px; 
 
    }

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-4-md text-center block"> 
 
     <h2> Some Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block2"> 
 
     <h2> Other Text </h2> 
 
    </div> 
 
    <div class="col-4-md text-center block3"> 
 
     <h2> More Text </h2> 
 
    </div> 
 
    </div> 
 
</div>