0

我在创建带有 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 以更大规模的方式执行此操作。现在，如果我能得到这个工作的例子，我可能也能让那些工作。

谢谢你的帮助。

4

1 回答 1

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/

于 2013-03-27T22:15:23.900 回答