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，使得在800像素（或任何你需要），你可以display none;上.hide800這個隱藏在div，然後添加一個div圍繞當前的HTML，但把一個內聯樣式顯示沒有。然後在800像素（或任何大小，你隱藏第一個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; 
} 
} 

如果你需要我進一步解釋讓我知道:)