Question

我有一种流畅和敏感的布局 - 两个div：.left和.right

我应该如何编写@media查询命令，以便在.container的宽度不超过800 px时，我的.left和.right始终保持400 px宽度，当容器的宽度从800 px和更大时我的.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 */

要防止div换行到新行，请添加
white-space:nowrap;对.left /right div的内容display:inline-block;和 .left到.right和.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; } div

fiddle here 〜|〜 fiddle with media query

<强> CSS

{{1}}

我的媒体查询命令不能完成这项工作

1 个答案: