1つの行から別の行にパネルを重ねる方法は？

Question

私はこれらのパネルを異なる行の中に持っています。簡単に私の問題、そして私の所望の出力を表示するには、ここでは左側に

は、私が遭遇した問題であり、右側に所望の出力は...視覚的です。右のパネルを他の行と重複させることがどういうことかと思いました。

（それが問題に貢献している場合）、すべての.container流体内にあるこのような私のHTMLの構造化された何かを、...私は、ブートストラップを使用してい

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- top-left panel --> </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- right panel --> </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> <!-- bottom-left panel --> </div> 
    </div> 
</div> 

。

p.s. htmlのスニペットを使用する方法については未知のhtml "サンプル"をごめんね。

Answer 1

左のdivを1つのラッパーに、もう1つを別のものにコーディングすることができます。あなたの視覚上のHTMLによる

<div class="row"> 
    <div class="col-md-6"> 
     <div class="panel"> 
      //top left panel 
     </div> 
     <div class="panel"> 
      // bottom left panel 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="panel"> 
      // right panel 
     </div> 
    </div> 
</div> 

HTMLは、罰金になりますが、高さは、この中で管理されていません。

あなたは左メインボックスに応じて、右のボックスの同じ高さを持っているしたい場合は、コード

HTML

<div class="row main"> 
    <div class="col-md-6 inner"> 
     <div class="panel"> 
      //top left panel 
     </div> 
     <div class="panel"> 
      // bottom left panel 
     </div> 
    </div> 
    <div class="col-md-6 inner"> 
     <div class="panel"> 
      // right panel 
     </div> 
    </div> 
</div> 

CSS

.main{ 
    display:flex; 
} 

Answer 2

使用flex

をfollwing使用

.flex{ 
 
    display:flex; 
 
} 
 

 
.flex-1{ 
 
    flex:1; 
 
} 
 

 
.height-50{ 
 
    height:50px; 
 
} 
 

 
.margin-r-15{ 
 
    margin-right:15px; 
 
} 
 

 
.border-1px{ 
 
    border:1px solid black; 
 
}

<div class="flex"> 
 
    <div class="flex-1 margin-r-15"> 
 
    <div class="height-50 border-1px" > 
 
    </div> 
 
    <div class="height-50 border-1px"> 
 
    </div> 
 
    </div> 
 
    <div class="flex-1 border-1px"> 
 
    </div> 
 
</div>

Answer 3

このようにしてみてください：（のGauravの答えのように）あなたが動作することを別々の列を使用できる場合

<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="row"> 
    <div class="col-md-12"></div> 
    </div> 
    </div> 
    </div> 

Answer 4

。ここでパネルの高さが不明（変数）の場合、実際には単純な方法ではありません。別のオプションは、あなたのHTMLを投稿

.row { 
    -moz-column-width: 50em; 
    -webkit-column-width: 50em; 
    -moz-column-gap: .1em; 
    -webkit-column-gap: .1em; 
    } 

    .col-md-6 { 
    float:none; 
    display: inline-block; 
    margin: .1em; 
    width: 100%; 
    } 

http://www.bootply.com/6ynLAwenzq

Answer 5

Please try this: 
<div class="row"> 
    <div class="col-lg-8 col-md-8 col-xs-12 col-s-12"> 
     <div class="col-lg-12 col-md-12"> 
    //Your Content Here 
     </div> 
     <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"> 
      //Your Content Here 
     </div> 
    </div> 
    <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12"> 
     <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"> 
      //Your Content Here 
     </div> 
    </div> 
</div>