响应式布局和列浮动问题

Question

我正在尝试使用Bootstrap 3.2.0在一行中使用一系列平铺div实现此布局，用于屏幕> 768px宽。 div高度是单个或双倍，在此示例中我设置为50px和100px ，div宽度由类col-sm-x ：

到目前为止，我最好的尝试使用了以下标记和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;
    }
}

标记：

<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没有填补空白：

JSFiddle - 显示问题

我知道我可以创建2列并将div包装在2个父div中，但我想避免这种情况。 原因是在移动视图中，我想并排放置div 2和4，而不是将它们堆叠起来，如果div被包含在2列中，我不相信我能做到。

例如，一旦我遇到这个问题，我打算设置我的移动视图看起来像这样：

Answer 1

用jQuery做吧

$(function(){ 
    var el = $(".row div:last-child"); 
    el.css('top', el.height() * -1); 
    $( window ).resize(function() {
        if($( window ).width() < 768){
            el.css('top', 0); 
        }else{
            el.css('top', el.height() * -1); 
        };
    });
})

小提琴

如果你能找到任何css解决方案，请告诉我。

Answer 2

我设法通过以下编辑修复布局问题到我的CSS媒体查询：

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

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

工作JSFiddle

Answer 3

将负上边距添加到＃8，它将弹出（-50px）。

http://jsfiddle.net/72vjc/1/

<div style="padding: 30px; color: #ccc;">
<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" style="margin-top:-50px">
        <p>8</p>
    </div>
</div>

我做的是看另一个宽度（我做col-sm-1），这使它更窄，但没有移动它。 这就是为什么它对我而言似乎是一个保证金问题。