如何创建 3 列布局（固定、固定、流动）[关闭]答案

【问题标题】：How to create 3-column layout (fixed, fixed, fluid) [closed]如何创建 3 列布局（固定、固定、流动）[关闭]
【发布时间】：2015-08-05 07:23:57
【问题描述】：

我正在尝试创建适用于大多数移动浏览器的 3 列布局。不幸的是，Flex 无法正常工作。

对流式、固定、固定布局有很大帮助 (http://www.pagecolumn.com/liquidfixed/3_col_liquid-fix-fix.htm)，但我确实需要固定、固定、流式。

目前无法完成这项工作，希望得到任何帮助。

【问题讨论】：

标签： css html css-float liquid-layout

【解决方案1】：

当你想要最后一个元素流动时，你可以使用float:none;。

最后一个元素得到float:none; 和一个padding-left，等于其他两个固定div 的宽度。

HTML

<div class="fixed first">
    fixed first
</div>
<div class="fixed second">
    fixed second
</div>
<div class="fluid third">
    fluid third
</div>

CSS

.fixed {float:left; }

.first {width:100px; height:100px; background-color:#ccc;}
.second {width:100px; height:100px; background-color:#ddd;}

.fluid { float:none;  padding-left:200px; background-color:#eee; height:100px;}

这是demo

基于 cmets 的更新（仅在 CSS 中更改）

.fixed {float:left; }

.first {width:100px; height:100px; background-color:#ccc; margin-right:10px;}
.second {width:100px; height:100px; background-color:#ddd; margin-right:10px;}

.fluid { float:none;  margin-left:220px; background-color:#eee; height:100px;}

这个概念也可以用margin代替padding。因此，您可以执行以下操作。我添加了一些边距来实现 div 之间的空间。固定div应该添加到流体div的margin-left的边距。

这是 jsfiddle 中更新的 demo。

在您的codepen 中，您只需添加.fluid { margin-left: 220px; }，如您所见here。

【讨论】：

我认为 300px 的 padding-right 使（绝对正确的）解决方案在小屏幕上看起来有点混乱（只是看看它）。（只需将相同的内容放在代码笔中：codepen.io/anon/pen/wazOLP）
@j.bearGraphics 这很好，我把窗口全屏了，甚至没有注意到。我用更小的宽度调整了我的例子
这看起来像是找到了正确的解决方案。我已将我的改编添加的代码放在这里：codepen.io/anon/pen/xGENxd 我想要做的是导航页脚。列之间应该有空格，您的示例无法完成此操作。任何想法如何适应这个？
我在底部的答案与这里的不同。无论如何：两种解决方案：通过在其间添加宽度等于您想要的空白的 div 来添加空白，或者，使用我添加的圣杯布局... ;)
@merlin 一项澄清。我在第一个答案中使用了padding-right，正确的答案是padding-left。我已经更新我的答案是正确的。

【解决方案2】：

尝试使用与“圣杯布局”相同的解决方案（两个侧边栏粘在左右两侧，中间有一个流体柱）。如果与左侧多列而右侧没有列一起使用，它也可以工作：

编辑：stackoverflow 答案是为网格构建的，我稍微更改了它以适应我的需要（固定/固定/流体/固定）...一旦找到它，我将发布编辑后的解决方案！

CSS fluid columns, fixed margins; the holy grail of holy grails （这个链接提供了一个完整的解释，包括一个例子）

另一个例子是 Matthew James Taylor 的这个版本： http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

您甚至可以使用此布局将流体列放在首位，或放在中间。

【讨论】：

这可能是一个很好的网站布局解决方案。我正在寻找具有固定、固定、流畅的导航布局。