我正在研究整个响应式设计并找到非常适合的流体网格 - 唯一的问题是，当我尝试为任何列提供固定宽度时，它们似乎会中断。当您缩小屏幕时，列会从浮动中弹出。我本来期望一个具有百分比宽度（或没有宽度）的流体列会缩小，而将固定宽度的列留在原处。创建像这样的混合流体/固定网格有多容易？我见过一种使用内联块而不是浮动块的解决方案，但是跨浏览器有多好，它是一种干净的做事方式吗？
这是一个问题示例：http://jsfiddle.net/andfinally/nJ97q/2/
谢谢！ 弗雷德
【问题讨论】：
将包装 div 上的 min-width 设置为两个固定列的最小宽度 + 下一列的一点点宽度。这样它就不会推动。
#row { min-width: 400px; }
需要注意的是，它不受 IE6 及更低版本的支持，并且在 IE7 中可能存在错误。
--------- 编辑 -------------
在这种情况下，我认为最适合您的是显示：表格单元设置。这将允许将所有内容锁定到您正在寻找的位置。
.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;
}
【讨论】：
没有干净的方法可以做到这一点。但是谁需要清洁呢？
我不建议混合使用固定宽度和可变宽度，但如果是，您可能需要媒体查询（IE 可使用大量 polyfill）。然后，您可以检查容器是否小于 X，在这种情况下，您可以重新排列布局（所有列的 1/3 或所有垂直等）。
这个例子有点奇怪。中间的空白处是什么？内容是什么？
PS。不要使用min-width。这会使整个响应无效。
【讨论】：
我想知道为什么不使用表格？
喜欢：
<table class="row">
<tr>
<td class="main">
</td>
<td class="middle">
</td>
<td class="sidebar">
</td>
</tr>
</table>
使用表格布局变得非常简单，没有JS，列高相同，完全兼容任何浏览器。
示例如下：http://jsfiddle.net/nJ97q/162/
我知道每个人都说使用表格是不好的做法，但它确实解决了所有这些问题。
【讨论】：
我认为下面的解决方案可能会对您有所帮助。
由于您以百分比形式提供“行” div 宽度，因此每次缩小窗口时它都会自行调整大小。如果可以的话，给它一个以像素为单位的宽度，如果你不能，那么使用 min-width 这样它就不会重新调整到 min-width 以下，因此你的面板将保持不变。
为了使其顺利： 您可以添加 javascript 以使其流畅。使用 window.onresize 事件调用一个函数，该函数包含代码以使“行”通过使用定时函数缓慢调整大小，该函数每 10 毫秒将“行”的宽度增加 10 个像素左右，直到最大长度，在这种情况下，窗口的长度达到。但是如果你以像素为单位设置宽度，你可以有效地做到这一点，否则会产生丑陋的缩小、放大效果。
希望对您有所帮助， 阿什温
【讨论】：
我有一个类似的问题，我需要有一个固定宽度的左列（菜单结构），但当浏览器缩小时，右列会响应地调整大小。
我最终实现了一些额外的媒体查询（它们已经存在以处理其他边缘情况）并找到适用于该媒体查询的右列的百分比宽度。这确实“跳跃”了一点（我只在标准手持/平板电脑/台式机上使用了 2 个“额外”媒体查询），但在两者之间的所有分辨率下，它都不会中断到下一行。实际上，您正在调整每个媒体查询中的上下文，然后才能中断。随着浏览器大小的调整，更多的媒体查询将等同于更平滑的中断。
我对跳转没问题，因为我不是为某人调整浏览器大小的用例而构建的，而是为了确保它在不同分辨率的设备上都能接受。
需要注意的是，在计算右列的百分比宽度时，使用的基本宽度是您所在的媒体查询的宽度，而不是原始全宽。此外，您必须使用 min-width 并使用在每个媒体查询部分的最小分辨率下工作的大小。
/* 641+ */
@media all and (min-width:641px) {
.itemDetailLanding {
width: 58.81435257410296%; /* 377 / 641 */
}
}
/* 725-768 */
@media all and (min-width: 725px) {
.itemDetailLanding {
width: 63.44827586206897%; /* 460 / 725 */
}
}
/* 769+ */
@media all and (min-width: 768px) {
.itemDetailLanding {
width: 65.625%; /* 504 / 768 */
}
}
/* 860-990 */
@media all and (min-width: 860px) {
.itemDetailLanding {
width: 69.18604651162791%; /* 595 / 860 */
}
}
/* 990+ */
@media all and (min-width:990px) {
.itemDetailLanding {
width: 74.04040404040404%;
}
}
【讨论】：