CSS, Responsive, Tạo các hộp nổi chồng lên nhau

Question

Tôi muốn tạo bố cục đáp ứng trong đó có hai cột, trái và phải. Trên màn hình nhỏ hơn, các hộp ở bên trái phải di chuyển đến các vị trí nhất định. Điều này làm việc tuyệt vời với mã của tôi nhưng vấn đề là trên màn hình lớn có một khoảng cách ở phía bên phải giữa các hộp.

Tôi có thể giải quyết nó bằng cách nào?

Ý tưởng và các vấn đề

JSFIDDLE

Khi bạn nhìn vào jsfiddle sau, bạn sẽ thấy rằng nó hoạt động cho màn hình nhỏ, nhưng những vấn đề không di chuyển trên màn hình lớn. Tôi biết cách tôi làm điều đó là sai nhưng làm thế nào tôi có thể nhận được kết quả mong muốn này với 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

thử mã này 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

Vấn đề là cấu trúc của html, bạn đã đặt div chính sau mỗi lần để divs nhỏ. Vì vậy, nó sẽ in div đó đầu tiên.

Điều tôi đề nghị làm là thay đổi cấu trúc html như thế này;

thả cột bên trái sang trái và phải cột.

Sau đó đặt xung quanh một div xung quanh

thêm phương tiện truyền thông css để tại 800px (hoặc bất cứ điều gì bạn yêu cầu), bạn display none; trên .hide800 này có thể ẩn div, sau đó thêm một div xung quanh html hiện tại của bạn nhưng đặt một phong cách inline không hiển thị. Sau đó, tại 800px (hoặc bất kỳ kích thước nào bạn ẩn div đầu tiên) thêm css vào display: block !Important;

Bằng cách này nó sẽ hoạt động như thế nào bạn cần cho trình duyệt có chiều rộng đầy đủ, nhưng khi màn hình đủ nhỏ để thay đổi cấu trúc bạn có thể sử dụng mã hiện tại của bạn.

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

Nếu bạn cần tôi để giải thích thêm cho tôi biết :)