Question

此处示例http://jsfiddle.net/oop4kdn6/33/

<div style="float:left;" id="leftsidebar1" >Left sidebar</div>
<div style="float:left;" id="maincontent1" >Main content</div>    
<div style="float:left;" id="rightsidebar1">Right sidebar</div>

我测试的css和哪里有问题

@media screen and (min-width: 641px) and (max-width: 900px) {
#maincontent1{ min-width: 241px; max-width: 500px }
#leftsidebar1, #rightsidebar1{width:200px;}    
}

因此。如果窗口宽度至少为641px且不超过900px，则两个侧边栏的宽度为200px。中间列的宽度（div #maincontent1）我预计实际窗口宽度减去400px（200 x 2）。

问题是如果窗口宽度是从641px到658px，那么#rightsidebar1是新行。如果超过658px，那么所有div都在一行中。

据我所知，为了避免这个问题，我必须为＃maincontent1设置更少的min-width。但不明白为什么。例如，如果窗口宽度为650px。它必须足以在一行中显示所有列。因为200 + 200 + 241 = 641。

为什么#rightsidebar1在新线？

Answer 1

试试这个

@media screen and (min-width: 641px) and (max-width: 900px) 
{

  *
  {     
      margin:0px;
  }
  #maincontent1{ min-width: 241px; max-width: 500px }
  #leftsidebar1, #rightsidebar1{width:200px;}    
}

默认页面有一些余量。总是使用

的好习惯

*{margin:0px}

删除默认保证金

css响应式设计。 2列固定宽度。中间div动态宽度。在某个窗口宽度处，一列位于新行

1 个答案: