Html 3列布局：固定宽度、可变宽度、填充剩余

我正在创建一个菜单，其中我将有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>

我已经修好了
链接
链接

---

和a.

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

然后，您可以将

marginleft

和

overflow-x

属性设置为

#middle

，以执行以下操作：

#菜单#左侧{
宽度：100px；
浮动：左；
}
#菜单#中间{
左边距：100px；/*将#中间列100px向右推*/
溢出-x:隐藏；/*防止进入右侧列的后面*/
}
#菜单#对{
浮动：对；
}

另外，您使用了

#link

选择器来选择锚定标记，而

link

是类值，这将通过使用

#菜单#right.link

来解决