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

我正在研究整个响应性设计，并发现流体网格非常适合这一点——唯一的问题是，当我尝试为任何柱提供固定宽度时，它们似乎会断裂。缩小屏幕时，列将从浮动中弹出。我希望一个具有百分比宽度（或没有宽度）的流体列只会收缩，而保留固定宽度的列。创建这样的混合流体/固定网格有多容易？我见过一种使用内联块而不是浮动块的解决方案，但是这种解决方案在浏览器中有多好，它是一种干净的方式吗

下面是一个问题示例：

谢谢！

---

弗雷德

我认为下面的解决方案可能会对你有所帮助

由于以百分比表示“row”div宽度，因此每次缩小窗口时它都会自动调整大小。如果可以，以像素为单位给它一个宽度，如果不能，则使用最小宽度，这样它就不会在最小宽度以下重新调整大小，因此面板将保持完整

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

希望有帮助，

---

Ashwin

没有干净的方法可以做到这一点。但是谁需要清洁呢

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

这个例子有点奇怪。中间的白色空间里有什么？内容是什么

---

注意：不要使用

最小宽度

。这将使整个响应无效。

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

#row { min-width: 400px; }

需要注意的一点是，它不受IE6及以下版本的支持，在IE7中可能存在bug

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

在这种情况下，我认为最适合您的是显示器：表格单元格设置。这将允许将所有内容锁定到您正在寻找的位置

.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;  
}

---

我遇到了一个类似的问题，我需要有一个固定宽度的左栏（菜单结构），但随着浏览器的减少，右栏会相应地调整大小

我最终实现了一些额外的媒体查询（它们已经存在以处理其他边缘情况），并找到了适用于该媒体查询的右列的宽度百分比。这有点“跳跃”（我只使用了标准手持/平板/台式机上的两个“额外”媒体查询），但在所有分辨率之间，它不会中断到下一行。实际上，在每个媒体查询中断之前，您正在调整其上下文。随着浏览器大小的调整，更多的媒体查询将等于更平滑的中断

我对跳转没什么意见，因为我不是为某个人调整浏览器大小的用例而构建的，而是为了确保它在不同分辨率的设备上可以正常工作

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

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

---

我想知道为什么不用桌子

比如：

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

以下是一个例子：

---

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

您是否希望使用“hello world”或固定宽度列作为徽标等的占位符？我已经通过使用媒体查询解决了这个问题，但这并不是所有媒体都支持的。我应该解释一下，“Hello world”列将包含最大的列，例如一篇文章的正文。其他两列用于侧栏内容。我打算使用媒体查询，但我的目标是一个流畅的布局，可以平滑地上下调整大小，如果可以的话，希望避免大小之间的跳跃。谢谢鲁迪，我还在学习。。我确实计划在真正的布局中使用HTML5元素。我本应该让我的示例更清楚，但我很匆忙。。“Hello World”列应该是主要内容列。@最后，HTML5元素真的没有那么重要。真的没人关心，也没人关心：谢谢Ashwin，有趣的想法，我再看一眼。如果你的问题解决了，别忘了回答你的问题。谢谢CBRRacer，这是一个明智的建议，似乎是解决这个难题的最好办法。呸！在我把一些内容放到“Hello World”专栏之前，这一切都很顺利。回到绘图板上，我想。@最后，您要寻找的东西在显示表设置中工作得更好。如果IE7被支持的话，同样会出现问题。嗯，我需要支持IE7，不幸的是，它不支持显示表。

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