在一个未定义大小的div中，将3个div并排放置

Question

我有一个占据整个屏幕宽度的标题。在标题中，我想放置3个div元素，这些元素应该相互对齐。两边的div元素宽度固定，而中间的div应该占用其他可用空间。因此，我不知道标题的宽度，也不知道中间容器的宽度。

目前我有以下代码： HTML:

<div id="header">
  <div id="menu-container">
    menu goes here
  </div>
  <div id="logo-container">
    logo goes here
  </div>
  <div id="music-player-container">
    music player comes here
  </div>
</div>

和CSS：

#header {
  height: 200px;
  margin: 0;
  padding: 0;
  border: 0;
}

#menu-container {
  width: 400px;
  height: inherit;
  float: left;
}

#logo-container {
  height: 100%;
  background-image: url('../images/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  width: auto;
}

#music-player-container {
  width: 400px;
  height: inherit;
  float: left;
}

这应该是根据浮动的其他问题工作的……但它没有。

- Olmo Kramer

---

能否看一下你的标记代码？ - Ryan Beaulieu

抱歉，第一篇帖子，代码格式化不好，请看这里。 - Olmo Kramer

Answer 1

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

http://jsfiddle.net/cy5E7/1/

在你的情况下：

http://jsfiddle.net/AjVHy/

负边距比左/右浮动固定div更好。如果用户窗口很小，我们不会得到混乱的布局。看看这个糟糕的例子（调整浏览器窗口到小宽度）：http://jsfiddle.net/surendraVsingh/qZLHb/1/（感谢@SVS）。在正常的浮动布局中，只有在父容器足够宽时，所有浮动的div才会在其位置上。

标准浮动布局的另一个缺点是，当我们想要列布局但不知道中间内容的高度时，它可能会看起来像这样：

• 浮动布局、动态内容高度
• 负边距布局、动态内容高度

- rogal111

---

+1，很好的方法，我喜欢这个技巧。如果您能解释一下负边距实际上是做什么的，那就太好了。因为我总是像这里 http://jsfiddle.net/surendraVsingh/qZLHb/1/ 这样错误地使用它。 - SVS

但在这种情况下，固定宽度的div宽度已知，因此用户显然会确保父div比它们的组合宽度更宽。 - moettinger

如果这个答案对您有帮助，请将其标记为已接受（在投票计数下方的勾选框中）。这将标记问题为已关闭并获得少量声望奖励。 - Artemix

Answer 2

将您的第二个和第三个div的顺序交换，然后使用这个CSS。

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

jsfiddle 示例

- moettinger

---

除非您需要将它们用作脚本目的的ID，否则您可能还想将所有这些ID更改为类。否则，您可能会得到一个具有过多特定性的混乱样式表。 - moettinger

什么问题？这不使用负边距。 - moettinger

忘了告诉你在HTML中要交换第二个和第三个div。这里是一个演示，显示这样可以正常工作。http://jsfiddle.net/mf6qr/ - moettinger

Answer 3

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

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

然后，您只需将包含它的div和td的尺寸设置为相同即可。

- user2510330

---

你有相关的 CSS 吗？ - Sergio

事实上，得票最高的答案采用了div解决方案，因此无需将div转换为表格。 - Artemix

Answer 4

另一个选项：

#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;
}

HTH

- nvwd

---

但是在IE中不支持table-cell吗？ - moettinger

我已在IE 8中进行了测试，结果运行良好。目前我无法访问早期版本。 - nvwd

真实但我认为IE7的使用率还不低到足以放弃支持它的程度——尽管我讨厌不得不迎合IE。呃。 - moettinger

Answer 5

你当然可以使用表格.. -隐藏-

在头部div中放置类似以下的内容：

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

（暂时太懒得写CSS）

- Deruijter

Answer 6

我不确定你计划编写什么代码，但在我的看法中，我认为是这样的：“您想要有3列，第1列是固定宽度，第2列是流体宽度，第3列再次是固定宽度。”

我不理解的是，在一个非常小的宽度监视器（例如1024x768分辨率）的情况下，两侧都有400像素的列会让您只剩下224像素的徽标空间。这看起来很不自然。

无论如何，如果您仍然想继续，我建议您将所有三个div[menu-container、logo-container和music-player-container]包含在另一个名为header（如果您使用HTML5）或任何您喜欢的名称的div中（如果您使用<= HTML 4.01），然后将其宽度固定为100％；和200px的固定高度。

然后让menu-container float: left;和music-player-container float: right;。这将给logo-container留出空间。让logo-container具有width: auto;。如果我没错，这样做将为您提供基本的半流体标题布局。

祝好，希望你的问题能够快速解决 :)

- Amruth Pillai

---

是的，也许我应该改变大小，但现在这并不重要... 我对这种方法的问题在于第三列(#music-player-container)最终会出现在其他两个容器下面。虽然它在正确的水平位置上，但却在标题下面而不是在标题内部。 - Olmo Kramer

Answer 7

我明白你想做什么，很抱歉我还没有找到一个解决方案，而不使用一些丑陋的JavaScript/jQuery。

实际上，问题是CSS没有任何属性（即使调整display属性）可以让你有两个元素，一个固定宽度，另一个占据div中剩余的空间。有一些通过浮动可以非常接近模拟这个效果的选项，但我可以告诉你，它们不太可能给你真正想要的结果。

有一个资源在那里，一个名为Bootstrap的项目，你可以像安装其他jQuery插件一样安装它（或者你实际上可以像使用“CSS”插件一样使用它 - 你会明白我的意思 - 如果你不想用JavaScript），它将使你能够实现你想要的效果。

这是链接：http://twitter.github.com/bootstrap/download.html

我强烈建议您先阅读文档，以确保您了解任何注意事项/限制。

祝你好运！

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

- Zachary Kniebel