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

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 占据 window 的宽度，侧边栏未使用，但是当我们移动到移动尺寸的屏幕时侧边栏 div 停止浮动并内联移动。

这对于桌面网站来说没问题，但是在移动网站上，因为我把侧边栏 div 放在主 div 之前，侧边栏先出现，我希望它出现下面。

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

Answer 1

为此，如果您想简化开发并限制使用 JavaScript，我建议您看一下 Bootstrap 框架。这实现了一个新的直观 class 系统，允许通过 CSS classes 在 HTML 而不是 JavaScript.

中进行动态缩放

看一下，它已成为许多网页的标准，使用该框架应该很容易实现您想要的。

希望对您有所帮助:)

Answer 2

是的，你可以。您可以通过两种方式进行处理：

旧版解决方案

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

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

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

现代解决方案

使用order（flexbox）。

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

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

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

Can I reorder using CSS / HTML or do I need JavaScript?

html

css

mobile

sidebar

responsive-design

旧版解决方案

现代解决方案