响应式CSS：div在备用分辨率上没有响应

除非浏览器/视口缩小到1280像素，身体中的3个div全部中断，否则一切正常。当浏览器收缩时，我只想让＃关联div中断，其他2个div（#main，#images）与#images并排浮动以填满屏幕。如果您将固定宽度添加到合同CSS上的#images div，则所有内容都完美叠加，但我不希望#images div具有固定宽度，我希望它伸展以填充屏幕。响应式CSS：div在备用分辨率上没有响应

想法？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, intial-scale=1.0" /> 
    <style type="text/css"> 
     body { 
      margin:0; 
      padding:0; 
      } 
     header nav { 
      float:left; 
      } 
     header nav ul { 
      margin:0; 
      padding:0px; 
      } 
     #menu1 li { 
      list-style-type:none; 
      float:left; 
      margin:0; 
      width:200px; 
      height:50px; 
      background:orange; 
      margin-right:1px; 
      } 
     #bodywrapper { 
      clear:both; 
      float:left; 
      position:relative; 
      } 
     #images { 
      position:relative; 
      margin:0 300px 0 600px; 
      background:cyan; 
      } 
     #main { 
      position:absolute; 
      top:0; 
      left:0; 
      width:600px; 
      background:lime; 
      } 
     #related { 
      position:absolute; 
      top:0; 
      right:0; 
      width:300px; 
      background:red; 
      } 
     #wrapper { 
      width:100%; 
      height:auto; 
      margin:0; 
      padding:0; 
      } 

     @media screen and (max-width: 1280px){ 
      #bodywrapper { 
       clear:both; 
       float:left; 
       position:relative; 
       } 
      #images { 
       float:left; 
       position:relative; 
       margin:0; 
       background:cyan; 
       } 
      #main { 
       float:left; 
       position:relative; 
       margin:0; 
       width:600px; 
       background:lime; 
       } 
      #related { 
       clear:both; 
       float:left; 
       position:relative; 
       margin:0; 
       width:100%; 
       background:purple; 
       } 
      #wrapper { 
       width:100%; 
       height:auto; 
       margin:0; 
       padding:0; 
       } 
      } 
    </style> 
    <script type="text/javascript" src="https://github.com/scottjehl/Respond/blob/master/respond.min.js"></script> 
</head> 
<body> 
<div id="wrapper"> 
    <header> 
     <nav> 
      <ul id="menu1"> 
       <li><a href="">link 1</a></li> 
       <li><a href="">link 2</a></li> 
       <li><a href="">link 3</a></li> 
       <li><a href="">link 4</a></li> 
      </ul> 
     </nav> 
    </header> 
    <div id="bodywrapper"> 
     <div id="main"> 
      111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 
     </div> 
     <div id="images"> 
      222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 
     </div> 
     <div id="related"> 
      333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 
     </div> 
    </div> 
</div> 
</body> 
</html>

来源

2013-06-03 user2441996

将主图像和图像设置为百分比值，图像浮动到右侧。

#main { 
      float:left; 
      position:relative; 
      margin:0; 
      width:40%; 
      background:lime; 
      } 
#images { 
      float:right; 
      position:relative; 
      width: 60%; 
      margin:0; 
      background:cyan; 
      }

如果你想保持主塔有一个固定的宽度，然后试试这个：一类容器包装的2列围绕一个div（主要和图像），然后把下面的CSS为1280px下。

.container { 
    position: relative; 
} 

.main { 
    width: 600px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.images { 
    margin-left: 600px; 
}

http://jsfiddle.net/Pete_D/bBQnM/2/

来源

2013-06-03 07:35:15

@Joebone其实我把它设置为60％来覆盖所有页面。他说他不想对图像进行修改。 –

也是如此，皮特！我想这就是为什么我的回答更多的是一个问题，因为最终的效果是不同的 - 基于他原来的例子，我假设他想保持第一个div的固定宽度为600px。虽然我真的更喜欢你的布局，但它可能会或可能不是他想要的，因此这两个答案:) – Joebone

**您的第二个选项完美工作，谢谢@peter！**只是为了澄清，@media标签似乎并不完全覆盖原来的CSS，对吧？因为使用我的原始脚本（没有工作的脚本），如果我删除了原来的CSS，并且默认情况下只使用了css1280，那么所有脚本都可以正常工作。但只要1280css是次要样式表，它就不起作用。为什么会这样？ – user2441996

难道浮标只是混乱的影响？如果用以下代码替换最大宽度块（当“3”div被包装时删除右边距），那么它是您正在寻找的效果？你特别提到不给#images的宽度，所以下面用60％的宽度的解决方案，我认为是不是你在找什么...

@media screen and (max-width: 1280px){ 
     #images { 
     margin-right:0; 
     background:cyan; 
     } 
     #related { 
      position:relative; 
      margin:0; 
      width: 100%; 
      background:purple; 
      } 
     }

来源

2013-06-03 07:47:14 Joebone

使用@media规则明确：留下的第三个DIV项目上特定的窗口宽度设置是基本/最简单的解决方案。

来源

2013-06-03 13:31:29

响应式CSS：div在备用分辨率上没有响应

回答

相关问题