Css 引导div对齐问题

我在引导3中尝试对齐div时遇到问题

以下是我试图实现的目标：

我曾经做过推拉练习，但我想我做得不够好

代码：

蓝色
红色
橙色
绿色
紫色

div有一个显示类型“block”，默认情况下，这意味着每个div将显示在另一个div的下面

这意味着您以某种方式更改了一些css，特别是使用float或display:inline

如果您不确定如何查找和更改此项，您可以始终确保每个div都有宽度：100%

---

这将确保div捕获其父容器的整个宽度。

您拥有的HTML将完美工作，只需删除紫色块上的

拉入按钮即可：

HTML:

明显的缺点是，这限制了对支持媒体查询的浏览器的修复。因此，如果它能在不同浏览器间一致工作，它会更好。
我看了这篇文章，想看看是否有人会来回答这个显而易见的问题：不要使用bootstrap推拉。使用右浮动和无浮动。蓝色必须比红色在最小宽度高，除此之外，我认为这将顺利工作


演示：

CSS:

.blue {
    background: blue
}
.red {
    background: red
}
.orange {
    background: orange
}
.green {
    background: green
}
.purple {
    background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
    height: 50px
}

@media (min-width:992px) { 
    .blue {
        height: 600px;
        float: right;
    }
    .red {
        height: 300px;
        float: none;
    }
    .orange {
        height: 400px;
        float: right;
    }
    .green {
        height: 200px;
        float: none;
    }
    .purple {
        height: 200px;
        float: none;
    }
}

HTML

<div class="container">
    <div class="row">
        <div class="col-md-9 blue">
            blue
        </div>
        <div class="col-md-3 red">
            red
        </div>
        <div class="col-md-9 orange">
            orange
        </div>
        <div class="col-md-3 green">
            green
        </div>
        <div class="col-md-3 purple">
            purple
        </div>             
    </div>
</div>  


蓝色
红色
橙色
绿色
紫色
您的代码是什么？你的尝试？：）我看到引导的唯一方法是复制橙色div检查这个如何回答问题？至少你知道bootstrap吗？谢谢，但我想做的是让绿色的div在红色的下方。它对你有用，因为你为每个div设置了相同的高度。…。@fred.kassi我认为设置明确的高度不是一个好主意，除非所有块的高度都相同。您可以从我的CSS中删除height属性，并将其拉回到紫色上，这将起作用：如果您希望列“垂直填充”空白空间，您只需将行的
背景颜色设置为最短列的颜色。我使用与我相同的内容（大小）填充div。。。您可以看到，边栏@fred.kassi仍然存在问题，引导程序使用的
float
会强制容器像那样折叠。但是，您可以轻松地用重写。非常好的解决方案+1
@media (max-width:1199px) {
    .red {
        height: 360px;
    }
}
@media (min-width:1200px) {
    .red {
        height: 300px;
    }
}

.blue {
    background: blue
}
.red {
    background: red
}
.orange {
    background: orange
}
.green {
    background: green
}
.purple {
    background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
    height: 50px
}

@media (min-width:992px) { 
    .blue {
        height: 600px;
        float: right;
    }
    .red {
        height: 300px;
        float: none;
    }
    .orange {
        height: 400px;
        float: right;
    }
    .green {
        height: 200px;
        float: none;
    }
    .purple {
        height: 200px;
        float: none;
    }
}

<div class="container">
    <div class="row">
        <div class="col-md-9 blue">
            blue
        </div>
        <div class="col-md-3 red">
            red
        </div>
        <div class="col-md-9 orange">
            orange
        </div>
        <div class="col-md-3 green">
            green
        </div>
        <div class="col-md-3 purple">
            purple
        </div>             
    </div>
</div>