使用媒体查询交换div位置

本文介绍了使用媒体查询交换div位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当浏览器宽度小于600像素时，我想要这样的位置更改，感谢媒体查询：

  * {padding：0; margin：0;}＃a {float：left; background-color：red; width：150px;}＃b {background-color：blue;}＃c {float：right;宽度：40％; background-color：yellow;} @ media（max-width：600px）{#c {width：100％; }}

 < div& < div id =a> a float< / div> < div id =c> c float或不< / div> < div id =b> b< / div>< / div>

When browser width becomes under 600px, I'd like such a position change, thanks to a media query :

It seems that this would need to swap div position. Is this possible with CSS?

* { padding: 0; margin: 0; }
#a { float: left; background-color: red; width: 150px; }
#b { background-color: blue; }
#c { float: right; width: 40%; background-color: yellow; }
@media (max-width: 600px) { 
        /* ... */
}

<div>
   <div id="a">a</div>
   <div id="c">c</div>
   <div id="b">b</div>
</div>

解决方案

You only need to reset the float or width properties.

Do mind the BFC block formating context when you deal with floating and non floatting elements.

* {
  padding: 0;
  margin: 0;
}
#a {
  float: left;
  background-color: red;
  width: 150px;
}
#b {
  background-color: blue;
}
#c {
  float: right;
  width: 40%;
  background-color: yellow;
}
@media (max-width: 600px) {
  #c {    
    width: 100%;
  }
}

<div>
  <div id="a">a float</div>
  <div id="c">c float or not</div>
  <div id="b">b</div>
</div>

这篇关于使用媒体查询交换div位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！