需要 CSS 3 列布局 fixed-fluid-fluid答案

【问题标题】：Need a CSS 3 column layout fixed-fluid-fluid需要 CSS 3 列布局 fixed-fluid-fluid
【发布时间】：2013-03-27 21:48:26
【问题描述】：

我在创建具有 3 个 div 的 3 列布局时遇到了困难。左 div 需要是固定宽度。中间和右侧的 div 需要具有流畅的宽度。当浏览器水平调整大小时，中间和右边的div需要按比例调整大小。

我见过一些 3 列流体布局与其他固定列的示例，但不是固定流体流体布局。

复制我的问题的标记如下。 CSS 有点冗长，因为我一直在解决这个问题。当我调整浏览器的大小时，右侧的 div 消失在水平线下方。此外，3 列应占#caption_stripe 宽度的 100%，但它们没有。右侧显示了大约 2-3 像素的间隙。

<html>
<head>
<style>
.contentMain {
    clear: both;
    overflow: hidden;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
    position: relative;
    overflow: hidden;
    height: 37px;
    width: 100%;
    max-width: 1024px;
    font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}
#caption_subjects {
    float: left;
    height: 37px;
    background-color: #3c3d3d;
    width: 13%;
    max-width: 138px;
    min-width: 138px;
    margin: 0;
    padding: 0;
}

#caption_topics {
    float: left;
    height: 37px;
    background-color: #707070;
    width: 42%;
    max-width: 422px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
#caption_modules {
    float: left;
    height: 37px;
    background-color: #989898;
    width: 45%;
    max-width: 464px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>
<div class="contentMain">
    <div id="lessons_wrapper" style="display:block">
        <div id="caption_stripe">
            <div id="caption_subjects">SUBJECTS</div>
            <div id="caption_topics">TOPICS</div>
            <div id="caption_modules">MODULES</div>
        </div>
        <br style="clear:both;" />
    </div>
</div>
</body>
</html>

我还需要使用显示在此标题下方的 div 来更大规模地执行此操作。现在，如果我能得到一个这样的例子，我可能也能让那些工作。

感谢您的帮助。

【问题讨论】：

标签： css css-float

【解决方案1】：

好吧，如果要修复，不知道为什么第一列有 % 宽度。

但主要需要注意的是，将您的流体 div 放入一个包装 div。然后给你的包装器一个左填充等于你的固定列的宽度。

.fluid-wrapper {
    width: 100%;
    height: 100%;
    padding-left: 100px;
}

为此，您需要将box-sizing 应用于包装器。这意味着填充将从包装器的内部宽度中扣除，而不是添加。

在所有元素上使用 box-sizing 相当安全，这在创建流畅/响应式设计时非常有用。

*, *:after, *:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

这是一个有效的 JSFiddle：http://jsfiddle.net/nhwGA/1/

【讨论】：

我会试一试。谢谢！
如何让右边的盒子固定而左边的盒子流动？ [我一直在尝试调整 jsfiddle 没有运气]