响应布局&列浮动问题 [英] Responsive layout & column float issue

问题描述

我试图实现这个布局与一系列的瓷砖divs在一行使用Bootstrap 3.2.0，屏幕> 768px 宽。 div的高度是单或双，在这个示例中我设置为 50px 和 100px 和div宽度由类 col-sm-x <​​/ code>控制：

我最好的尝试是使用下面的标记& css：

Css

 。 red {background-color：red; } 
 .blue {background-color：blue; } 
 .green {background-color：green; } 
 .yellow {background-color：yellow; } 
 .purple {background-color：purple; } 
 
 .home-height-single {min-height：50px; } 
 .home-height-double {min-height：100px; } 
 
 @media（min-width：768px）{
 .b-col {
 float：right; 
} 
} 
  

标记 p>

 < div class =row> 
< div class =col-sm-6 home-height-double green> 
< p> 1< / p> 
< / div> 
< div class =col-sm-4 home-height-single blue b-col> 
< p> 3< / p> 
< / div> 
< div class =col-sm-2 home-height-single purple b-col> 
< p> 2< / p> 
< / div> 
< div class =col-sm-2 home-height-single green b-col> 
< p> 7< / p> 
< / div> 
< div class =col-sm-4 home-height-double yellow b-col> 
< p> 6< / p> 
< / div> 
< div class =col-sm-2 home-height-single blue> 
< p> 4< / p> 
< / div> 
< div class =col-sm-4 home-height-single red> 
< p> 5< / p> 
< / div> 
< div class =col-sm-2 home-height-single red b-col> 
< p> 8< / p> 
< / div> 
< / div> 
  

目前生成以下内容，其中div 8不填补空缺：

>

I'm trying to achieve this layout with a series of tiled divs in a single row using Bootstrap 3.2.0, for screens > 768px wide. The div heights are either single or double, which in this sample I've set to 50px and 100px and div widths are controlled by class col-sm-x:

My best attempt so far uses the below markup & css:

Css

.red{ background-color: red; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.yellow{ background-color: yellow; }
.purple{ background-color: purple; }

.home-height-single{ min-height: 50px; }
.home-height-double{ min-height: 100px; }

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}

Markup:

<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col">
        <p>8</p>
    </div>
</div>

This currently produces the below, where div 8 isn't filling the gap:

JSFiddle - Showing the issue

I'm aware that I could create 2 columns and wrap the divs in 2 parent divs, but I want to avoid this. The reason being that on a mobile view, I want to place divs 2 & 4 side by side, rather than have them stacked, which I don't believe I can do if the divs are wrapped in to 2 columns.

For example, I'm planning to setup my mobile view to look something like this once I've got past this issue:

解决方案

I managed to fix the layout issue with the following edit to my CSS media query:

@media (min-width: 768px) {
    .row {
        position: relative    
    }
    .b-col {
        float: right;
    }

    .b-col:last-of-type {
        position: absolute;
        bottom: 0;
        right: 0
    }
}

Working JSFiddle

这篇关于响应布局&列浮动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！