更改窗口上的页面布局调整大小

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/