CSS,响应,使浮动框堆叠起来

Question

我想创建一个响应式布局,其中有两列,左侧和右侧.在较小的屏幕上,左侧的框必须移动到某些位置.这对我的代码很有用,但问题是在大屏幕上,盒子之间的右侧有一个间隙.

我该如何解决？

这个想法和问题

的jsfiddle

当您查看以下jsfiddle时,您会发现它适用于小屏幕,但问题不会在大屏幕上向上移动.我知道我这样做的方式是错的,但我怎样才能通过CSS获得这个理想的结果呢？

http://jsfiddle.net/7rnum9xk/

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }    
}

Answer 1

试试这个代码 DEMO

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
   float:left; 
    display: inline-block;
}
.small{
    width:35%;
    height:25px;
    /* float:left; */
    display:inline-block;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }

}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}