Question

我有两个div，一个主左内容和一个右边。使用媒体查询（随着屏幕变小），我希望左侧内容div向下移动并允许右侧div移动到它之上。

这是我现在所拥有的......

HTML：

    <div id="content">content</div>
    <div id="aside">aside</div>

CSS：

    #content {
    color:white;
    width:70%;
    background: #111; height: 100px;
    position:inline;
    float:left;}

    #aside { 
    float: right; 
    background: #CCC; height: 100px;width: 100px;}

    @media screen and (max-width: 500px){
    #content {
    width: 100%; 
    margin-left: 0px;
    clear: both;
    }}

见这里：https://jsfiddle.net/kaveman71/n55444ca/1/

目前，当调整较小时，旁边的div会移动到内容div（通常情况下）以下，但我希望相反的情况发生;旁边的div应该移动到左内容div之上（不是字面上）。

因此，当调整较小时，结果应该是灰色的旁边框，弹出上方黑色内容框。

有没有办法用CSS做到这一点？或者我需要求助于JavaScript？如果JS是唯一的方法，任何人都可以提供一个例子吗？

谢谢，

ķ

Answer 1

如果颠倒div的顺序，因为当css定义全屏时它们的位置，它应该在调整大小时放在内容之外。

<div id="aside">aside</div>
<div id="content">content</div>

Answer 2

首先想到的是将HTML内容排在第一位。

<div id="aside"></div>
<div id="content"></div>

默认情况下，旁边将位于内容div的顶部。

然后，通过媒体查询，您可以使用以下内容将内容放在旁边的内容中：

@media (min-width: 500px) {
    #content {
        float: left;
        width: 70%;
    }
    #aside {
        float: right;
        width: 100px
    }

}

如何在左边内容div之上移动div

2 个答案: