Question

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

以下是问题的一个示例：http://jsfiddle.net/andfinally/nJ97q/2/

谢谢！佛瑞德

Answer 1

将包装div上的min-width设置为两个固定列的最小宽度+下一列的一点点。这使得它不会推动。

#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/

Answer 2

这样做没有干净的方法。但谁需要干净？

我不会建议混合使用固定宽度和流量宽度，但如果你是这样，你可能需要媒体查询（IE可以使用大量的polyfill）。然后，您可以检查容器是否小于X，在这种情况下，您重新排列布局（所有列的1/3或垂直的所有列等）。

虽然这个例子有点奇怪。中间的所有白色空间都是什么？内容是哪个？

PS。不要使用min-width。这使整个响应无效。

Answer 3

我想知道为什么不使用表格？

像：

<table class="row">
    <tr>
        <td class="main">
        </td>
        <td class="middle">
        </td>
        <td class="sidebar">
        </td>
    </tr>
</table>

使用表格布局变得非常简单，没有JS，相同的列高，与任何浏览器完全兼容。

以下是示例：http://jsfiddle.net/nJ97q/162/

我知道每个人都说使用表格是不好的做法，但它确实解决了所有这些问题。

Answer 4

我认为以下解决方案可能会对您有所帮助。

由于您以百分比形式给出“行”div宽度，因此每次缩小窗口时它都会自行调整大小。如果可以，请给它一个宽度（以像素为单位），如果你不能那么使用最小宽度，这样它就不会重新调整到最小宽度以下，因此你的面板将保持不变。

使其顺利：您可以添加javascript以使其流畅。使用window.onresize事件来调用一个函数，该函数包含使用“定时”函数缓慢调整“行”的代码，该函数将“行”的宽度每10毫秒增加10个像素，直到最大长度，在这种情况下是窗口的达到了长度。但是，如果设置宽度（以像素为单位），则可以有效地执行此操作，否则将产生难看的缩小效果，放大效果。

希望有所帮助，阿斯温

Answer 5

我有一个类似的问题，我需要有一个固定宽度左列（菜单结构），但在浏览器减少时响应性地调整右列。

我最终实现了一些额外的媒体查询（它们已经存在以处理其他边缘情况）并找到适用于该媒体查询的右列的百分比宽度。这确实会“略微”跳跃（我只使用标准手持设备/平板电脑/桌面设备上的2个“额外”媒体查询）但是它之间的所有分辨率都不会突破到下一行。实际上，您正在调整每个媒体查询中的上下文，然后才能中断。随着浏览器的大小调整，更多媒体查询将等同于更平滑的中断。

我对跳转感觉不错，因为我不是建立一个调整浏览器大小的用例，而是确保它在不同的分辨率设备上可以接受。

有一点需要注意，在计算右列的百分比宽度时，使用的基本宽度是您所在的媒体查询的宽度，而不是原始的全宽。此外，您必须使用最小宽度并使用每个媒体查询部分以最小分辨率工作的大小。

/* 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%;
   }
}

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

5 个答案: