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;}

Answer 2

问题在于 html 的结构，您将主 div 放在每个小 div 之后。所以它会先打印那个 div。

我建议做的是像这样改变 html 结构；

左列左浮动，右列右浮动。

然后在周围放一个div

添加媒体 css 以便在 800px（或任何您需要的）处您可以在 .hide800 上 display none; 这隐藏 div，然后在您当前的 html 周围添加一个 div，但放置一个显示无的内联样式。然后在 800px（或隐藏第一个 div 的任何大小）处添加 css 到 display: block !Important;

这样它就可以满足您在全宽浏览器中的需要，但是当屏幕小到足以改变结构时，您可以使用您当前的代码。

html;

<div class="hide800">
    <div class="left-col">
    <div class="main">
    </div>
    <div class="main">
    </div>
    <div class="main">
    </div>
    </div>
    <div class-right-col">
    <div class="small orange">
    </div>
    <div class="small green">
    </div>
    <div class="small blue">
    </div>
    <div class="small purple">
    </div>
    <div class="small red">
    </div>
    </div>
</div>
<div class="show800" style="display:none;">
<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>
</div>

css;

.left-col {
float: left;
}
.right-col {
float: right;
}
@media screen and(max-width:800px){
.hide800 {
display: none;
}
.show800 {
display: block !Important;
}
}

如果您需要我进一步解释，请告诉我:)