使用以下布局:
绿色可以在较小的屏幕上堆叠。我怎样才能实现这种布局? 目前我没有绿色,所以我不能堆叠,但我可以对齐那些蓝色、橙色和灰色的行。
<div class="row blue">
<div class="col blue-col"></div>
<div class="col blue-col"></div>
<div class="col blue-col"></div>
<div class="col blue-col"></div>
<div class="col blue-col"></div>
</div>
<div class="row orange">
<div class="col orange-col"></div>
<div class="col orange-col"></div>
<div class="col orange-col"></div>
<div class="col orange-col"></div>
<div class="col orange-col"></div>
</div>
<div class="row gray">
<div class="col gray-col"></div>
<div class="col gray-col"></div>
<div class="col gray-col"></div>
<div class="col gray-col"></div>
<div class="col gray-col"></div>
</div>
编辑: 蓝色和橙色有不同的高度。
答案 0 :(得分:2)
此代码有帮助吗? (忽略“jkd”,它们是我用来给出高度的占位符,您可以用您需要的任何测量值替换它们)
<body>
<div class = "container">
<div class = "row" id = "green-row" style = "border:3px solid green;">
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div>
</div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
<div id = "purple-row" class = "col-md-2 col-sm-3 mt-5 text-center" style = "border:2px solid purple; margin: 5px 5px 5px 5px">
<div id = "blue-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: blue">
jkd
</div>
<div id = "orange-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: orange">
jkd
</div>
<div id = "gray-row" class = "col-md-12 mt-5 text-center" style = "margin: 5px 5px 5px 5px; background-color: gray">
jkd
</div> </div>
</div>
</div>
<style>
#purple-row{
transform: translateX(50%);
}
</style>
你也可以添加这段代码,让所有元素都具有相同的高度:
<script>
var all = document.getElementsByName("purple-row");
// alert(all.length)
maxHeight = 0
for (var i=0, max=all.length; i < max; i++) {
// alert(all[i].style.borderColor)
if(all[i].offsetHeight > maxHeight){
maxHeight = all[i].offsetHeight;
}
}
alert(maxHeight)
for (var i=0, max=all.length; i < max; i++) {
all[i].style.height = maxHeight + "px";
}
</script>