Html 在未定义大小的div中，将3个div相邻放置在一个div中

我有一个标题，它占据了整个屏幕的宽度。在我的标题中，我想放置3个div，它们应该相邻对齐。div位于固定宽度的一侧，中间应占据其他可用空间。所以我不知道标题的宽度，也不知道中间容器的宽度

现在我有这个代码： html:

---

根据浮子的其他问题，这应该是可行的。。。。没有

您可以使用带负边距的浮动div：

在您的情况下：

负边距比左/右浮动固定div更好。若用户有很小的窗口，我们不会弄乱布局。看看这个糟糕的示例（将浏览器窗口调整为小宽度）：（感谢@SVS）。在正常的浮动布局中，只有当父容器足够宽时，所有浮动的div才在位

标准浮动布局的另一个缺点是，当我们需要列布局，但我们不知道中间内容的高度时，看起来它可以

---

我不确定您打算编写什么代码，但在我看来，我是这样看的：“您希望有3列，第1列是固定宽度，第2列是流体宽度，第3列是固定宽度。”

我在这里没有理解的是，对于一个非常小的宽度监视器（比如1024x768分辨率），两边都有一个400px的列，只剩下224px的徽标空间。这看起来很不自然

---

无论如何，如果您仍想继续，我建议您将所有三个div[

菜单容器、徽标容器和音乐播放器容器

]封装在另一个名为header（如果您使用的是HTML5）的元素或另一个具有任意名称的div中（如果您正在使用切换第二个和第三个div的顺序，则使用此CSS

#menu-container, #music-player-container {
    float:left;
    width: 400px;
}
#music-player-container {
    float:right;
}
#logo-container {
    margin:0 400px;
}

---

我理解您的意图，很抱歉，我还没有找到一个解决这个问题的方法，而不使用一些丑陋的JavaScript/jQuery格式

本质上，问题在于CSS没有任何属性（即使在处理显示属性时也没有）这将允许您拥有两个元素，一个具有固定宽度，另一个占用div中的剩余空间。有一些带有float的选项可以让您非常接近地模拟这一点，但我可以告诉您，它们不太可能提供您真正想要的

有一个资源，一个叫做Bootstrap的项目，你可以像任何其他jQuery插件一样安装（或者你可以像“CSS”插件一样使用它——你会明白我的意思——如果你不想要JavaScript的话），这将使你能够做你想做的事情

以下是链接：

我强烈建议您首先查看文档，以确保您了解任何警告/限制

祝你好运

编辑：我喜欢rogal的答案，但在使用它之前，您应该记住，这样做会删除您添加左边框的能力，并且很难将背景图像应用到具有负边距的div中。

另一个选项：

#header {
    display: table;
    height: 200px;
    margin: 0;
    padding: 0;
    border: none;
}
#header > div {
    display: table-cell;
    height: inherit;
}
#menu-container, #music-player-container {
    width: 400px;
}
#logo-container {
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
}

---

你当然可以用桌子。。 -隐藏-

header div中的类似内容：

<table width=100%>
    <tr>
        <td width=200>
            menu
        </td>
        <td>
            logo
        </td>
        <td width=400>
            music
        </td>
    </tr>
</table>

菜单
标志
音乐

---

（对于CSS atm来说太懒了）

想不出一个很好的方法来做这件事。这不是一个理想的解决方案，但你可以把它变成一个表

<table>
    <tr>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
    </tr>
</table>

---

然后你可以将div和包含它的td的维度设置为相同的。

可以看看你的标记吗？担心，第一篇文章，代码格式不好。这是+1很好的一个，我喜欢这个技巧。如果你解释一下负边距实际上在做什么就好了。因为我总是以错误的方式这样做ke在这里，但在这种情况下，固定宽度的div宽度是已知的，因此用户显然会确保父div宽度大于其组合宽度。@user1410620如果答案有用-请将其标记为接受（计票下面的勾选标记）。这会将问题标记为关闭+小代表奖金。您可能还希望将所有这些ID更改为类，除非您需要将它们作为ID用于脚本编写。否则，您可能会得到一个混乱的样式表，具有太多的特殊性。有什么问题吗？这不会使用负边距。忘了告诉您切换第二个和第三个html中的div。这里的fiddle显示了这一点。是的，也许我应该更改大小，但现在这并不重要……这种方法的问题是第三个collumn（#音乐播放器容器）在另外两个容器的下方结束。在正确的水平位置，但在标题下方，而不是在标题内部。但IE不支持表单元格，是吗？我在IE 8中进行了测试，它工作正常。ATM我没有访问早期版本。是的，但我不认为IE7的使用率低到足以保证放弃它的支持-尽可能多我讨厌迎合IE。呃。你也有css吗？事实上，得票最多的答案有div解决方案，所以没有必要将div转换成表。

<table width=100%>
    <tr>
        <td width=200>
            menu
        </td>
        <td>
            logo
        </td>
        <td width=400>
            music
        </td>
    </tr>
</table>

<table>
    <tr>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
        <td>
            <div></div>
        </td>
    </tr>
</table>