Question

我有几个div，并排放置并使用媒体查询来堆叠它们，它们堆叠但我需要黄色的顶部和蓝色位于它下面。与脚本运行时看到的情况相反，并且不确定如何执行此操作。

#wrapper {
    width:1000px;
}
#mydivLeft {
    background:blue;
    height:250px;
    width:50%;
    float:left;
}

#mydivRight {
    background:yellow;
    height:250px;
    width:50%;
    float:right;
}

@media only screen and (max-width:768px){
    #wrapper {
        width:100%;
    }

    #mydivRight, #mydivLeft {
        display:block;
        float:none;
        width:100%;
    }

}

<body>
    <div id="wrapper">
        <div id="mydivLeft">
        </div>
        <div id="mydivRight">
        </div>
    </div>
</body>

Answer 1

您可以使用flexbox使用order来反转元素堆叠的顺序

＆＃13;

#wrapper {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 250px;
}
#wrapper div {
  flex: 1;
}
#mydivLeft {
  background: blue;
}
#mydivRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #wrapper div {
    flex: 0 100%
  }
  #mydivRight {
    order: -1
  }
}

＆＃13;

<body>
  <div id="wrapper">
    <div id="mydivLeft">
    </div>
    <div id="mydivRight">
    </div>
  </div>
</body>

＆＃13;

Answer 2

您可以使用flexbox布局。默认情况下，flex-direction为row，媒体查询会将其更改为column-reverse。

＆＃13;

#wrapper {
  max-width: 1000px;
  display: flex;
}
#mydivLeft, #mydivRight {
  flex: 1;
  height: 250px;
}
#mydivLeft {
  background: blue;
}
#mydivRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #wrapper {
    flex-direction: column-reverse;
  }
}

＆＃13;

<div id="wrapper">
  <div id="mydivLeft"></div>
  <div id="mydivRight"></div>
</div>

＆＃13;

Answer 3

您可以将HTML中div的顺序颠倒为您想要的顺序。

＆＃13;

#wrapper {
    width:1000px;
}
#mydivLeft {
    background:blue;
    height:250px;
    width:50%;
    float:left;
}

#mydivRight {
    background:yellow;
    height:250px;
    width:50%;
    float:right;
}

@media only screen and (max-width:768px){
    #wrapper {
        width:100%;
    }

    #mydivRight, #mydivLeft {
        display:block;
        float:none;
        width:100%;
    }

}

＆＃13;

<div id="wrapper">
  <div id="mydivRight">
  </div>
  <div id="mydivLeft">
  </div>
</div>

＆＃13;

或者，更复杂的解决方案是使用flexbox，并使用order属性或flex-direction: column-reverse;重新排序flex子项。

＆＃13;

#wrapper {
  width: 1000px;
  display: flex;
}

#wrapper > div {
  width: 50%;
  height: 250px;
}

#mydivLeft {
  background: blue;
}

#mydivRight {
  background: yellow;
}

@media only screen and (max-width:768px) {
  #wrapper {
    width: auto;
    flex-direction: column-reverse;
  }
  #wrapper > div {
    width: auto;
  }
}

＆＃13;

<div id="wrapper">
  <div id="mydivLeft">
  </div>
  <div id="mydivRight">
  </div>
</div>

＆＃13;

Div的堆叠在彼此的顶部，只是没有正确的顺序

3 个答案: