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之间的空间。应将固定div添加到流体div的margin-left的边距。

以下是jsfiddle中更新的demo。

在您的codepen中，您只需添加.fluid { margin-left: 220px; }就可以看到here。

Answer 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

您甚至可以使用此布局将流体柱放在第一个位置或中间位置。

如何创建3列布局（固定，固定，流畅）

2 个答案: