divの最初の行のdivの直下に同じ列のサイズであるが、最初の行の別の列の高さでブロックされる方法

Question

タイトルが混乱している場合は申し訳ありません。私は、問題をより明確にするためのスクリーンショットを含めました。

は、本質的に、私はグリーンボーダーDIVが干渉青色ボーダーDIV無し赤色境DIV直下になりたいです。

は、ここで私のCSSのみのdivの周りに境界線を入れている

<div class="container appParent"> 
    <div class="row"> 
     <div class="col-md-6" id="song-view"> 
      <app-selected-song-view></app-selected-song-view> 
     </div> 
     <div class="col-md-6" id="songs-added"> 
      <app-songs-added></app-songs-added> 
     </div> 

    </div> 
    <div class="row"> 
     <div class="col-md-6" id="playlist-form"> 
      <app-playlist-form></app-playlist-form> 
     </div> 
    </div> 
</div> 

（私はブートストラップv3.3.7を使用しています）私のHTMLコードです。それ以外はブートストラップです。この場合

#song-view{ 
    border: 2px solid red; 
} 
#songs-added{ 
    border: 2px solid blue;  
} 
#playlist-form{ 
    border: 2px solid green;  
} 

Answer 1

、pull-rightを使用して、単一rowにcol-のすべてを保ちます。

<div class="container appParent"> 
    <div class="row"> 
     <div class="col-md-6" id="song-view"> 
      <app-selected-song-view></app-selected-song-view> 
     </div> 
     <div class="col-md-6 pull-right col-xs-12" id="songs-added"> 
      <app-songs-added></app-songs-added> 
     </div> 
     <div class="col-md-6" id="playlist-form"> 
      <app-playlist-form></app-playlist-form> 
     </div> 
    </div> 
</div> 

http://www.codeply.com/go/189ofQG5Sj

Answer 2

あなたのHTMLを再配置することができます。

#song-view { 
 
    border: 2px solid red; 
 
    height: 100px; 
 
    margin-bottom: 30px; 
 
} 
 

 
#songs-added { 
 
    border: 2px solid blue; 
 
    height: 150px; 
 
} 
 

 
#playlist-form { 
 
    border: 2px solid green; 
 
    height: 100px; 
 
    margin-bottom: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container appParent"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div id="song-view"> 
 
     <app-selected-song-view></app-selected-song-view> 
 
     </div> 
 
     <div id="playlist-form"> 
 
     <app-playlist-form></app-playlist-form> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div id="songs-added"> 
 
     <app-songs-added></app-songs-added> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

することはでき簡単な使用の高さ分、余分なスタイリングのためのdivにコンテナと行を囲みます。あなたは、私はすぐに作られたこの例を確認することができます。JsFiddle

<div class="song-list"> 
    <div class="row"> 
     <div class="container"> 
      <div class="col-md-6" id="song-view"> 
       Song View 
      </div> 

      <div class="col-md-6" id="songs-added"> 
       Songs Added 
      </div> 
     </div> 
    </div> 
</div> 

<div class="playlist"> 
    <div class="row"> 
     <div class="container"> 
      <div class="col-md-6" id="playlist-form"> 
       Playlist Form 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

これは彼の問題を解決する方法

.song-list #song-view { 
    border:1px solid blue; 
    min-height:300px; 
} 
.song-list #songs-added { 
    border:1px solid red; 
    min-height:500px; 
} 

.playlist #playlist-form { 
    border:1px solid green; 
}