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

Question

我有一个标题，它占据了整个屏幕的宽度。在我的标题中，我想放置 3 个 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;
}

根据 float 的其他问题应该可以工作....它没有

Answer 1

您可以使用带负边距的 float div:

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

在您的情况下:

http://jsfiddle.net/AjVHy/

负边距比左/右浮动固定 div 更好。如果用户的窗口非常小，我们不会弄乱布局。看看这个坏的例子(将浏览器窗口调整为小宽度):http://jsfiddle.net/surendraVsingh/qZLHb/1/ (感谢@SVS)。在正常的 float 布局中，所有 float 的 div 只有在父容器足够宽时才会出现。

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

• float layout, dynamic content height
• negative margins layout, dynamic content height