Question

我有3列。 left，middle和right。

left和middle为固定宽度，right应填充剩余空间。

我该如何做到这一点？

当前HTML

<div id="menu">

    <div id="left">
    </div>

    <div id="middle">
    </div>

    <div id="right">
    </div>

</div>

LESS

#menu {

    width: 100%;

    #left {
        width: 20%;
        float: left;
    }

    #middle {
        width: 300px;
        float: left;
    }


    #right {
        overflow-x: hidden;
        float: right;
    }

}

Answer 1

我认为

#right{
     width:auto;
     float:right;
     overflow-x: hidden;
}

必须工作。

Answer 2

#menu {
    width: 100%;
    #left {
         width: 20%;
         float: left;
    }
    #middle {
         width: 300px;
         float: left;
    }
    #right {
         width: -webkit-calc(100% - 20% - 300px);
         width: -moz-calc(100% - 20% - 300px);
         width: -o-calc(100% - 20% - 300px);
         width: calc(100% - 20% - 300px);
         float: right;
    }
}

您必须知道calc仍然是一种实验性技术，如果您正在寻找浏览器兼容性，我建议您使用javascript。

Answer 3

以下a fiddle全部正常运作。

这是“小屏幕优先”所以 - 如果你没有...那么你可以删除@media规则。

看起来你真正需要的是宽度自动 - 并确保它没有浮动。

HTML

<aside class="container left"><h2>Left</h2></aside>

<section class="container main-content"><h2>Main content</h2></section>

<aside class="container right">
    <h2>Right</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et beatae quam quibusdam dolor dolorum vero harum commodi vel quidem quasi sed dolores iusto is</p>
</aside>

CSS

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    float: left;
}

@media (min-width: 800px) {

    .left {
        width: 20%;
    }

    .main-content {
        width: 400px;
    }

    .right {
        width: auto;
        float: none;
    }

}

Answer 4

#middle {
    width: 300px;
    float: left;
    position: relative; /* Show above #right */
}
#right {
    width: 80%;
    margin-left: -300px; /* equal to width of #middle in px */
    padding-left: 300px; /* equal to width of #middle in px */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    float: right;
}

CSS 3列 - 前两个固定宽度，第三个剩余宽度

4 个答案:

HTML

CSS