Question

我的页面左侧是侧边栏，右侧是内容。

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

当窗口变小时，我想让我的侧边栏移到下面。

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

我尝试用CSS做，但我只知道当侧边栏最初在右边时如何做。然后我想我可以在Window.resize和Window.load上使用jQuery，但这在很多层面都是错误的:(

可行吗？

Answer 1

媒体查询的另一个选项。这次将内容放在标记中的内容之后。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

将您的商品设置为display: inline或display: inline-block，然后为其定义明确的宽度/高度（px）。这将导致元素更改行。如果您想使用百分比，请定义min-width。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我想我明白了。毕竟，似乎jQuery并不是一个坏主意：）

我使用了2个侧边栏。第一个（常规）一个由WordPress显示。

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

在内容之后，我添加了另一个侧边栏。只是一个空的div。

<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');

}）;

在Windows上更改页面布局调整大小

4 个答案: