3

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

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

4

7 回答 7

6

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

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

在你的情况下：

http://jsfiddle.net/AjVHy/

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

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

于 2012-07-27T13:16:13.797 回答
1

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

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

jsfiddle 示例

于 2012-07-27T13:26:47.953 回答
0

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

我在这里无法理解的是，对于一个非常小宽度的显示器（例如 1024x768 分辨率），两边都有一个 400px 的列只会给你留下 224px 的徽标空间。会显得不自然。

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

然后让 menu-containerfloat: left;和 music-player-container float: right;。这将为徽标容器提供空间。让 logo-container 有一个width: auto;. 如果我是对的，这样做会给你一个基本的半流体标题布局。

干杯，希望你的问题得到快速解决:)

于 2012-07-27T13:20:19.410 回答
0

我理解你想要做什么，我很遗憾地说，我还没有找到解决这个问题的方法，而不使用一些丑陋的 JavaScript/jQuery 形式。

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

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

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

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

祝你好运！

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

于 2012-07-27T13:28:26.130 回答
0

另外一个选项：

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

高温高压

于 2012-07-27T13:45:29.040 回答
0

你当然可以用一张桌子.. -隐藏-

标题 div 中的内容如下：

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

（对于 CSS atm 来说太懒了）

于 2012-07-27T14:04:21.093 回答
0

想不出一个很好的方法来做到这一点。不是一个理想的解决方案，但你可以把它变成一张桌子。

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

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

于 2013-07-02T09:04:51.737 回答