ブートストラップパネルの配置

Question

私は3つのdivを持っており、数時間の研究の後であっても私が望むように配置することはできません。 私はブートストラップの行と列を使用しています。クラスの

I have

What I want

なし設定高さを持っていません。

Answer 1

AとCを同じcol-xs-6に入れる必要があります。

<div class="row"> 
    <div class="col-xs-6"> Container A, Container C</div> 
    <div class="col-xs-6"> Container B </div> 
</div> 

Answer 2

次の2つの部品により画面を分割する必要が別の要素

.d1 { 
 
    height: 100px; 
 
    background: orange; 
 
} 
 
.d2 { 
 
    height: 200px; 
 
    background: lightgreen; 
 
} 
 
.d3 { 
 
    height: 100px; 
 
    background: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-7"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 d1"></div> 
 
      <div class="col-xs-12 d3"></div> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-5"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 d2"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

このコードを試して、それら内部次いでネスト（6：5：6または7）。

HTMLコード

<table class="container"> 
    <tr> 
    <td class="right"> 
     <div class="top"> 
     <div class="block"></div> 
     </div> 
     <div class="bottom"> 
     <div class="filler"></div> 
     <div class="block"></div> 
     </div> 
    </td> 
    <td class="left"> 
    </td> 
    </tr> 
</table> 

CSSコード

.container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.left { 
    border: 1px solid #080808; 
    width: 50%; 
    height: 200px; 
} 

.right { 
    height: 100%; 
    width: 50%; 
    padding-right: 3px; 
} 

.right .top { 
    border: 1px solid #080808; 
    height: 49%; 
    width: 100%; 
    vertical-align: top; 
    margin-bottom: 3px; 
} 

.right .bottom { 
    border: 1px solid #080808; 
    height: 49%; 
    width: 100%; 
    vertical-align: bottom; 
} 

.block { 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
} 

.filler { 
    height: 100%; 
    background: red; 
    display: inline-block; 
} 

フィドルリンク

Click here