3列布局：固定宽度，宽度变化，填充剩余部分

Question

我正在创建一个菜单，其中我将有3列。第一个具有固定宽度，第三个具有变化宽度，第二个应填充剩余空间。

所以，我面临两个问题。首先，如何让中间盒填充剩余空间？第二，如何在没有固定宽度的情况下让链接彼此相邻？

这是一个代码示例。

<div id="menu">
    <div id="left">I am fixed</div>

    <div id="middle">
        <input type="text" id="search" placeholder="I should fill the remainder!" />
    </div>

    <div id="right">
        <div class="link">Link</div>
        <div class="link">Link</div>
    </div>
</div>

和JSFiddle。

Answer 1

首先，您需要按如下方式对列重新排序：

<div id="menu">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>

然后，您可以将margin-left和overflow-x属性设置为#middle来执行此操作：

#menu #left {
    width: 100px;
    float: left;    
}

#menu #middle {
    margin-left: 100px;  /* Push the #middle column 100px to the right       */
    overflow-x: hidden;  /* Prevent from getting behind of the right column  */
}

#menu #right {
    float: right;
}

<强> JSFiddle Demo

此外，您使用了#link选择器来选择锚标记，而link是类值，这可以通过使用#menu #right .link来修复。