Question

我见过三列（固定流体固定）的例子。但是，我需要一个四列解决方案的例子。

两个外柱是固定的。两个内柱是流体。

修正了|流体|流体|固定

Answer 1

您可以使用calc。

.first, .last {
    width: 300px;
}
.middle {
    width: calc(50% - 300px);
}

您可能也想要应用供应商前缀。

Answer 2

HTML

<div id="framecontentLeft">
    <div class="innertube">
        <h1>Left Frame 1</h1>
    </div>
</div>

<div id="framecontentRight">
    <div class="innertube">
        <h1>Right Frame 4</h1>
    </div>
</div>


<div id="maincontent">
    <div class="inner1">
        <h1>Middle Frame 2</h1>
    </div>
    <div class="inner2">
        <h1>Middle Frame 3</h1>
    </div>
</div>

CSS

#framecontentLeft, #framecontentRight{
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 200px;
    height: 100%;
    background-color: navy;
    color: white;
}

#framecontentRight{
    left: auto;
    right: 0; 
    width: 150px;
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 0;
    left: 200px;
    right: 150px;
    bottom: 0;
    background: #fff;
    overflow: hidden;
}

.inner1{
    height: 100%;
    background:red;
    width:50%;
    float:left;
}
.inner2{
    background:green;
    height: 100%;
    width:50%;
    float:right;
}

DEMO

Answer 3

如果你可以使用它，我比calc更喜欢flexbox。它更灵活。

<div id="container">
    <div class="fixed">
        Fixed
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fixed">
        Fixed
    </div>
</div>

#container {
    display: flex;
}

.fixed {
    width: 15em;
}

.fluid {
    flex: 1;
}

Dabblet.当然，这使得所有列都具有相同的高度，如果你可以假设，没有flexbox这样做也没有问题给出一个容器（注意如果流体元素不一定比固定的高，那么你应该给内部容器max-height）：

<div id="container">
    <div class="fixed left">
        Fixed
    </div>

    <!-- Fluid container! No, you don’t have to call it this. -->
    <div class="bottle">
        <div class="fluid">
            Fluid
        </div>

        <div class="fluid">
            Fluid
        </div>
    </div>

    <div class="fixed right">
        Fixed
    </div>
</div>

#container {
    position: relative;
}

.fixed {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 15em;
}

.fixed.left {
    left: 0;
}

.fixed.left {
    right: 0;
}

.bottle {
    margin: 0 15em;
    overflow: hidden;
}

.fluid {
    float: left;
    width: 50%;
}

当然，如果.bottle溢出，您需要某种清算::after。

CSS - 4柱（固定流体液固定）

3 个答案: