Question

我很难创建一个包含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将显示在此标题下方。现在，如果我能得到一个这样的工作的例子，我可能会得到那些工作。

感谢您的帮助。

Answer 1

好的不确定为什么你要修复第一列的％宽度。

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

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

为此，您需要将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/

需要CSS 3列布局固定流体流体

1 个答案: