具有一些固定宽度列的流体布局

Question

我正在研究整个响应式设计的事情并找到适合的流体网格 - 唯一的问题是当我尝试给任何列提供固定宽度时它们似乎会破坏.缩小屏幕时,列会浮出浮动状态.我原本期望一个宽度为百分比(或没有宽度)的流体柱只是为了收缩,将固定宽度的列留在原位.创建这样的混合流体/固定网格有多容易？我见过一个内联块而不是浮动块的解决方案,但跨浏览器有多好,它是一种干净的做事方式吗？

这是一个问题的例子:http://jsfiddle.net/andfinally/nJ97q/2/

谢谢!弗雷德

Answer 1

将包装器div上的最小宽度设置为两个固定列的最小宽度+稍微为下一列.这使得它不会推动.

#row { min-width: 400px; }

需要注意的是,它不受IE6及以下版本的支持,并且可能在IE7中出错.

---------编辑-------------

在这种情况下,我认为最适合你的是显示器:table-cell setup.这样可以将所有内容锁定到您要查找的位置.

.main {
    padding: 10px;
    background: #efefef;
    display: table-cell; //this locks to #sideNav
}

#sideNav {
    display: table-cell; //this wraps the sidebar and middle and locks to main
    width: 280px;
    verticle-align: top;
}

.middle {
    display: table-cell; //this locks with .sidebar
    width: 140px;
    padding: 10px;    
    background: #bbb;  
}

.sidebar {
    display: table-cell; //this locks with .middle
    width: 100px;
    padding: 10px;    
    background: #555;  
}

http://jsfiddle.net/nJ97q/73/