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

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

Answer 1

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

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

在您的情况下：

http://jsfiddle.net/AjVHy/

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

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

Answer 2

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

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

jsfiddle example

Answer 3

我不确定你打算编写什么代码，但在我看来，我看到它是这样的：“你想要有3列，第1列是固定的，第2列是流体宽度第3列又是固定宽度。“

我在这里无法理解的是，在一个非常小的宽度监视器（例如1024x768分辨率）的情况下，在两侧都有一个400px的列将为您留下仅224px的徽标空间。这看起来不太自然。

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

然后让菜单容器float: left;和音乐播放器容器float: right;。这将为徽标容器提供空间。让徽标容器有width: auto;。如果我做对了，这样做会给你一个基本的半流体标题布局。

干杯，希望你的问题得到快速解决：）

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

Answer 5

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

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

然后你可以设置div的尺寸和包含它的td是相同的。

在未定义大小的div中将3个div放在一起

5 个答案: