Question

很抱歉，标题令人困惑。我已经包含了我的问题的截图，以使其更清晰。

基本上，我希望绿色边界的div直接位于红色边界的div下方，而不会使蓝色边界的div干扰。

这是我的HTML代码（我使用的是Bootstrap v3.3.7）

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

我的CSS只是将边框放在div周围。其他一切都是自助式的。

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

Answer 1

在这种情况下，请使用pull-right，并将所有col-保留在一个row中。

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

如何将第二行中的div直接放在第一行中具有相同列大小的div下面，但是被第一行中另一列的高度阻止

3 个答案: