HTMLとCSSによるボックスのスタッキング

Question

3つのボックスを作成し、適切に配置したいと考えました。それは1行の2つのボックスと2番目のボックスの下の3番目のボックスになります。 2番目と3番目のボックスは、最初のボックスと同じ高さになります。あなたは視覚的に私がここでやろうとしているかを見ることができます：http://codepen.io/sibraza/pen/KMzwWR

ここで私が達成しようとしているものの例である：

スニペット：

.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

フレックスボックスでは右側のdivのラッパーを使用できます

これをソートする

* { 
 
    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

最も簡単な方法は、彼がそのまま聞かせてONT大きなdiv要素を持っており、右側にある2つのコンテナ事業部を作成することです。そのCSSは、このようなsomehting次のようになります。

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

あなたのHTMLがする必要があります：

<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> 

コンテナは内部の小さなdivタグの両方を保持し、一緒にグループ化をします。

Answer 3

フレックスボックスを使用した簡単なソリューションです。

希望すると、これが役立ちます。感謝:)

.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>