如何创建 3 列布局（固定、固定、流动）

Question

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

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

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

Answer 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

根据评论更新（仅在 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 之间的 space。固定 divs 应添加到流体 div.

的 margin-left 的边距

这是 jsfiddle 中更新后的 demo。

在你的codepen you just need to add .fluid { margin-left: 220px; } as you can see here.

Answer 2

尝试使用与 "Holy Grail Layout" 相同的解决方案（两个侧边栏粘在左右两侧，中间有一个流体柱）。如果与左侧多列且右侧没有列一起使用，它也适用：

编辑：Whosebug 答案是为网格构建的，我对其进行了轻微更改以满足我的需要 (fixed/fixed/fluid/fixed)...一旦找到它，我将 post编辑后的解决方案！

CSS fluid columns, fixed margins; the holy grail of holy grails （此 link 提供了包括示例在内的完整解释）

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

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

如何创建 3 列布局（固定、固定、流动）

How to create 3-column layout (fixed, fixed, fluid)

html

css

liquid-layout

css-float