更改窗口上的頁面佈局調整大小

Question

我有一個頁面，其左側邊欄和右側內容。

___________ _____________________ 
|   | |     | 
|   | |     | 
|   | |     | 
| sidebar | |  content  | 
|   | |     | 
|   | |     | 
|   | |     | 
|_________| |___________________| 

當窗口得到足夠小，我想有我下面的側邊欄移動。

_____________________ 
|     | 
|     | 
|     | 
|  content  | 
|     | 
|     | 
|     | 
|___________________| 
_____________________ 
|     | 
|  sidebar  | 
|___________________| 

我試着用CSS來做到這一點，但我只知道怎麼做時，側邊欄是原本就對了。 後來我想我可以在Window.resize和Window.load使用jQuery，但錯了這麼多層次:(

是否可行？

Answer 1

我想我得到了它。畢竟，似乎jQuery不是一個壞主意:)

我用了2個側邊欄。第一個（常規的）由WordPress顯示。

<div id="secondary" class="widget-area" role="complementary">

內容之後，我又增加了側欄。只是一個空格。

<div id="secondary2" class="widget-area" role="complementary"></div> 

然後我用jQuery將內容從一個移到另一個，而另一個則留空。我認爲它有效。如果有人看到任何缺點，請讓我知道;）

jQuery(document).ready(function($){ 

var sidebar_original = $('#secondary').html(); 

$(window).resize(function() { 

    var sidebar_content = $('#secondary').html(); 
    var windowsize = $('.wrapper').width(); 

    if ((windowsize) >= 770 && sidebar_content !== sidebar_original){ 

     $('#secondary').html(sidebar_original); 
     $('#secondary2').html(""); 

    }else if((windowsize) < 770 && sidebar_content === sidebar_original){ 

     $('#secondary').html(""); 
     $('#secondary2').html(sidebar_original); 
    } 
}); 

$(window).trigger('resize'); 

}）;

Answer 2

設置你的項目display: inline或display: inline-block，然後定義明確的寬度/高度（PX），對他們來說，這將導致要素改變線路。如果你想使用百分比，定義min-width。

.flow { 
 
    width: 30%; 
 
    background-color: red; 
 
    margin: 10px; 
 
    display: inline-block; /*or table */ 
 
    height: 100px; 
 
    min-width: 375px; 
 
}

<div class="flow"> 
 
    Block 1 
 
    </div> 
 

 
    <div class="flow"> 
 
    Block 2 
 
    </div>

min-width表示它在包裝之前的寬度。

Answer 3

這很簡單。我們可以做一個共同的結構：

#wrapper { 
 
    height:400px; 
 
    width:100%; 
 
} 
 

 
#wrapper div { 
 
    float:left; 
 
} 
 

 
#content { 
 
    height:100%; 
 
    width:70%; 
 
    background-color:blue; 
 
} 
 

 
#sidebar { 
 
    width:29%; 
 
    height:100%; 
 
    background-color:red;

<div id="wrapper"> 
 
    <div id="sidebar"></div> 
 
    <div id="content"></div> 
 
</div>

和查詢改變，當窗口大小的變化，你可以使用媒體。我創建了這條規則：@media screen and (max-width: 500px)。它被解釋爲：「當屏幕寬度大小爲500px或更少...」。因此，我們可以做一個新的規則更改的元素：

@media screen and (max-width: 500px) { 
    /* New rules here */ 
} 

你說的是需要在右側邊欄逗留，那麼當畫面切換它去底部。我做了側邊欄到內容高度的底部。請參閱：

@media screen and (max-width: 500px) { 
    #wrapper div { 
     float:none; 
     width:100%; 
     position:absolute; 
    } 
    #sidebar { 
     height:200px; 
     top:100%; 
    } 
} 

---

你會需要它適應您的需求，但它是一個基礎。

小提琴：https://jsfiddle.net/2sqL7eaq/

Answer 4

與媒體查詢另一種選擇。這次將標題中的內容放在邊欄上。

.content { 
 
    background-color: lightgreen; 
 
    display: inline-block; /* inline block so the sidebar can be after the content in the markup */ 
 
    width: calc(100% - 10em); /* 100% minus the width of the sidebar */ 
 
} 
 
.sidebar { 
 
    background-color: lightpink; 
 
    float: left; /* floated left so it appears to the left of the content */ 
 
    width: 10em; 
 
} 
 
@media (max-width: 30em) { /* when the width is less than 30em, make both of the widths 100% */ 
 
    .content, 
 
    .sidebar { 
 
    width: 100%; 
 
    } 
 
}

<div class="content"> 
 
    <p>This is the main content div</p> 
 
    <p>Isn't it beautiful?</p> 
 
    <p>I have so much awesome content!</p> 
 
</div> 
 
<div class="sidebar"> 
 
    <p>I am your sidebar</p> 
 
    <p>I'm sad I'm not more important...</p> 
 
</div>

https://jsfiddle.net/cxx04wcc/3/