當瀏覽器的寬度600px的下變，我想這樣的位置變化，多虧了媒體查詢：交換DIV位置
看來，這將需要交換的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>你只需要重置浮動或width屬性。
在處理浮動和非浮動元素時，不要介意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>是的，這可能與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將被所有主流瀏覽器，支持except IE 8 & 9。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請使用Autoprefixer。更多詳情，請點擊this answer。
謝謝，太棒了！ – Basj
這是我最後一個問題@GCyrillyus：http://stackoverflow.com/questions/37239774/full-width-input-in-a-div ...也許你會有一個想法:) – Basj
@Basj看到迪帕斯的答案從http://codepen.io/gcyrillus/pen/WwWPwP/更新應該做你最終尋找的東西 –