与媒体查询交换 div 个位置

Question

当浏览器宽度低于 600px 时，我想要这样的位置变化，感谢媒体查询：

看来这个需要调换div的位置。这可能与 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>

Answer 1

您只需重新设置浮动或宽度属性。

处理浮动和非浮动元素时请注意 BFC 块格式化上下文。

http://www.sitepoint.com/understanding-block-formatting-contexts-in-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) {
  #c {    
    width: 100%;
  }
}

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

Answer 2

是的，CSS 是可能的。事实上，使用专为此类任务设计的 flexbox 非常容易。

* {
  padding: 0;
  margin: 0;
}

#container {
  display: flex;                    /* establish flex container */
}

#a {
  flex: 0 0 150px;                  /* don't grow, don't shrink, fixed at 150px width */
  background-color: red;
}
#b {
  flex: 1;                          /* consume all available free space in the row */
  background-color: aqua;
}
#c {
  flex: 0 0 40%;                    /* don't grow, don't shrink, fixed at 40% width */
  background-color: yellow;
}
@media (max-width: 600px) {
  #container { flex-wrap: wrap; }        /* allow flex items to wrap */
  #b { flex-basis: calc(100% - 150px); } /* take full width less width of #a */
  #c { flex-grow: 1; }                   /* consumer all available free space in the row */
}

<div id="container"><!-- children ordered chronologically; no need to reverse order -->
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

要了解有关 flexbox 的更多信息，请访问：

flexbox的好处：

最少的代码；非常高效
centering, both vertically and horizontally, is simple and easy
响应迅速
浮动和表格提供的布局容量有限，因为它们从未用于构建布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in 。

与媒体查询交换 div 个位置

Swap div position with media query

html

css

css-float

media-queries