響應式2列布局問題

Question

我在解決這個難題時遇到了問題：我使用的是固定寬度右列和左列取出剩餘空間的2列布局。兩個高度都是可變的。所以像這樣：

<div class="sidebar">sidebar</div> 
<div class="main-area">main content</div> 

<style> 
.sidebar { float: right; width: 250px; } 
.main-area { position: relative; overflow: hidden; } 
</style> 

好吧，所以在這裏一切都很好。但是棘手的一點。我使用CSS3在達到750px的最大寬度時啓用css更改。我希望邊欄在下面分解並具有100％的寬度（因此它成爲主要內容的頁腳）。但是，因爲在HTML代碼中，側欄div必須首先出現在主區域上方。

關於如何解決這個問題的任何想法？

非常感謝！

Answer 1

簡單的回答你的問題是沒有。如果邊欄落在HTML內容區域之前，則無法將邊欄移動到斷點內容的下面。至少...沒有沒有JavaScript和一堆瘋狂。

這就是說...只需將您的邊欄低於您的主要內容div。在語義上，你沒有理由不去。

<section class="container"> 
    <div class="main-area">main content</div> 
    <div class="sidebar">sidebar</div> 
</section> 

但是需要進行一些CSS更改。它不像以前那麼簡單，但也不是特別困難。

.container { 
    position: relative; 
} 

.sidebar { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 250px; 
} 
.main-area { 
    background: red; 
    margin-right: 250px; 
} 

Here is a JSFiddle demonstrating it working.

隨意不同數量的內容添加到任何主要內容區域或側邊欄，你會看到，無論是仍然有不同的高度不互相干擾。

Answer 2

HTML：

<section class="container"> 
    <div class="main-area">main content</div> 
    <div class="sidebar">sidebar</div> 
</section> 

CSS：

.container { 
    position: relative; 
    max-width: 1024px; /* could be width: x% as well*/ 
} 

.sidebar { 
    position: absolute; 
    right: 0; top: 0; 
    width: 250px; 
} 

.main-area { 
    margin-right: 260px; /* sidebar width plus 10px gap */ 
} 

@media only screen and (max-width: 750px) { 

    .sidebar { 
      position: static; 
      width: 100%; 
    } 

    .main-area { 
     width: 100%; 
     margin-right: 0; 
    } 

} 

Answer 3

我想你可以通過jQuery來實現這一點。

HTML

<div class="main-area"></div> 
<div class="sidebar"></div> 

CSS

.sidebar{ 
    background-color: #000; 
    height: 200px; 
    width: 50%; 
} 
.main-area{ 
    position: relative; 
    background-color: #ff0000; 
    height: 200px; 
    width: 50%; 
} 

jQuery的

$(function(){ 
    $('.sidebar').css('float', 'right'); 
    $('.main-area').css('float', 'left'); 

    $(window).resize(function(){ 
    if($(this).width() <= 750){ 
     $('.main-area').removeAttr('style'); 
     $('.sidebar').removeAttr('style'); 
    }else{ 
     $('.sidebar').css('float', 'right'); 
     $('.main-area').css('float', 'left'); 
    } 
    }); 
}); 

你可以看到這裏產生 - >jsFiddle

嗯，這是我的方式。

Answer 4

我想我找到了答案在這裏：http://jsfiddle.net/salman/TPNpy/

<div id="main-area-wrap"> 
    <div id="main-area">Column 1</div> 
</div> 
<div id="sidebar">Column 2</div> 
<div id="clear"></div> 

#main-area-wrap{ 
    float: left; 
    width: 100%; 
} 
#main-area { 
    background-color: cyan; 
    margin-right: 200px; 
} 
#sidebar{ 
    background-color: lime; 
    float: left; 
    width: 200px; 
    margin-left: -200px; 
}