html - 缩小页面时CSS div垂直堆叠

Question

我有一个包含两列的页面，如下所示：

| 1 | | 2 |

第 1 列的宽度为 80%，第 2 列的宽度为 20%，并且向右浮动。第一列有很多文字和文字，而第二列只有一个小表格。

当在智能手机上查看页面时，我希望第 2 列垂直堆叠在第 1 列上方，如下所示：

| 2 |

| 1 |

有什么建议么？我不知所措。

我正在尝试在 WordPress 中执行此操作，如果这有什么不同的话。

Answer 1

使用媒体查询来定位您的设备，并将侧列放在标记中内容列的上方。float: right;侧栏和float: left;内容栏正常显示在桌面上。使用 amedia-query拥有它们clear: both;并移除浮动。

CSS（更新为 100% 包装）

.wrapper {
  overflow: hidden;
  min-width: 300px;
  width: 100%;
}

article {
  background: #efefef;
  float: left;
  width: 80%;
}

aside {
  background: #ccc;
  float: right;
  width: 20%;
}

@media only screen and (max-width : 320px) {
  aside, article {
    clear: both;
    float: none;
    width: 100%;
  }
}

HTML

<div class='wrapper'>
  <aside>Sidebar with form</aside>
  <article>Content content content ...</article>
</div>

Codepen 草图。

Answer 2

使用媒体查询为您的目标屏幕尺寸设置样式。这是一个列出了其中许多的网站。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

在媒体查询中为这些 div 设置样式。

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .one, .two {
        width: 100%;
    }
}

如果您希望它在桌面上也显示响应，请将 min-device-width 和 max-device-width 设置为 min-width 和 max-width。