我的媒體查詢命令不會做的工作

Question

我有那種流暢性和響應佈局 - 兩個div：。左和.right

我應該怎麼寫我@media查詢命令，這樣，直到.container沒有按不會超過800像素寬度，我的.left和.right總是保持400像素的寬度，當容器的寬度從800像素變大時，我的.left和.right會變得更寬。

此命令不起作用：

@media only screen and (max-width: 800px) 


.container .row .columns.eight { 
    width: 400px; 
} 

而且我也希望我的.right DIV不歸入.left下來的時候我讓畫面變小。

Answer 1

媒體查詢是行不通的，因爲你沒有花括號

@media only screen and (max-width: 800px) 
{ /*<- missing from your code */ 
     .container .row .columns.eight { 
     width: 400px; 
     } 
}/*<- missing from your code */ 

• 爲防止格從包裝到新行媒體的查詢，添加
  white-space:nowrap;那些.left /right的div的conatiner和
  display:inline-block;到.left和.right DIV

fiddle here〜|〜 fiddle with media query

CSS

.cont { 
    white-space:nowrap; 
    width:100%; 
} 
.right { 
    border:1px solid black; 
    width:50%; 
    height:200px; 
    display:inline-block; 
} 
.left { 
    border:1px solid red; 
    width:50%; 
    height:200px; 
    display:inline-block; 
}