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

Question

问题标题几乎总结了它。我想知道是否有可能有两个div并排：

DIV＃1 | DIV＃2

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

DIV＃2

DIV＃1

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

干杯， 本。

Answer 1

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

例如，普通的CSS只会让两个元素都浮动，而你的320px样式会让它们浮动。

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

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

此处有更多详情 - http://css-tricks.com/css-media-queries/

Answer 2

你可能会使用花车让div们坐在一起。当屏幕太小时，使用@ media-queries可以更改此行为。在您的CSS文件中：

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

这只是一个例子，如果窗口大小小于480px，会将float：none设置为您网站上的所有div;调整它以达到你想要的效果：）