Question

我正在开发一个有侧边栏和主要部分的网页。 CSS / HTML基本上如下所示：

<html><head>
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
#sidebar {
    float: right;
    min-width: 220px;
    height: 200px;
    background-color: Red;
}
#content {
    background-color: #f0f0f0;
    height: 200px;
    overflow: hidden;
}
@media screen and (max-width: 450px) {
    #sidebar {
        float: none;
    }
}
</style></head>
<body>
<div>
    <div id="sidebar">
    </div>
    <div id="content">
    </div>
</div>
</body></html>

因此，我们的想法是，当并排显示时，内容div占据了侧边栏未使用的窗口的宽度，但是当我们移动到移动尺寸的屏幕时，侧边栏{{1}停止浮动并内联移动。

这适用于桌面版网站，但在移动网站上，因为我已将我的侧边栏div放在我的主要div之前，所以侧边栏首先显示，我希望它显示在下方。

是否有一个简单/通常实践的解决方案，并不涉及使用javascript在加载后移动div s？我应该采取不同的方法吗？

Answer 1

是的，你可以。有两种方法可以解决这个问题：

遗留解决方案

将您的侧边栏放在内容之后，将float:right主要内容容器放在桌面大小上。这样，侧边栏将位于桌面左侧，但会显示在移动设备上的主要内容之后。

＆＃13;

body {margin: 0;}
.main-wrapper >*{
  box-sizing: border-box;
  padding: 20px;
  display: inline-block;
  min-height: 200px;
}
#sidebar {
  background-color: Red;
  min-width: 30%;
  max-width: 30%;
  min-height: 200px;
}
#content {
  background-color: #999;
  float: right;
  width: 70%;
}
@media screen and (max-width: 450px) {
  #content,#sidebar  {
    float: none;
    width: 100%;
    min-width: initial;
    max-width: initial;
  }
}

＆＃13;

<div class="main-wrapper">
  <div id="content">
    content
  </div>
  <div id="sidebar">
    sidebar
  </div>
</div>

＆＃13;

现代解决方案

使用 order （flexbox）。

＆＃13;

body {margin: 0;}
.main-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 100vh;
}
#sidebar, #content {
  padding: 20px;
  box-sizing: border-box;
}
#sidebar {
  background-color: red;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30%;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
}
#content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
@media (max-width: 450px) {
  .main-wrapper{
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  #sidebar, #content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
  }
  #sidebar {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
}

＆＃13;

<div class="main-wrapper">
  <div id="sidebar">
    sidebar
  </div>
  <div id="content">
    content
  </div>
</div>

＆＃13;

Answer 2

为此，如果您希望简化开发并限制使用JavaScript，我建议您查看Bootstrap框架。这实现了一个新的，直观的类系统，允许通过HTML而不是JavaScript中的CSS类进行动态扩展。

看一下，它已经成为很多网页的标准，你想要的东西应该很容易用于框架。

希望这会有所帮助：）

我可以使用CSS / HTML重新排序还是需要JavaScript？

2 个答案:

遗留解决方案

现代解决方案