html - 两个 div 并排，但如果屏幕太小，则强制右 div 保持在左 div 上方

Question

问题标题几乎概括了它。我想知道是否可以并排放置两个 div，例如：

分区 #1 | 分区 #2

但是如果屏幕太小（例如在移动设备上），我希望发生这种情况：

分区 #2

分区 #1

也就是说，DIV #1 向下滑动而不是 DIV #2

干杯，本。

score 0 · Accepted Answer

您可以使用 CSS 媒体查询来检查定位中的屏幕尺寸。

例如，普通的 CSS 只会让两个元素都向左浮动，而您的 320px 样式会将它们设为非浮动。

您可以使用 min-width 和 max-width 指令来检查这个

<link rel='stylesheet' media='screen and (min-width: 401px) and (max-width: 900px)' href='css/medium.css' />

score 0 · Accepted Answer

您可能使用浮动让 div 彼此相邻。当屏幕太小时，使用@media-queries 更改此行为。在您的 CSS 文件中：

@media only screen and (max-width: 480px) {
    /* when window size is below 480px */
    div {
        float: none;
    }
}

这只是一个示例，如果窗口大小小于 480 像素，它将为您网站上的所有 div 设置 float:none；调整它以实现你想要的:)

2 回答 2