Question

我的页面中心有一个主div，ID为“panel”。

我想定位另一个div，“工具栏”，使其顶部对齐并与“panel”div的一侧齐平。

像 Layout

一样

我希望面板div保持居中。（目前通过将margin-left / margin-right设置为auto来实现此目的）

当我调整窗口大小时，工具栏上的绝对定位会中断。

我也尝试将它们漂浮在包装纸内，但总是将面板从中心移开......

这感觉应该很简单，我忽略了什么？实现这一目标的最佳方法是什么？

此处的当前实例： Example

感谢您的任何建议..

标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en-US" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="toolbar">
            Toolbar
        </div>
        <div id="panel">
            Panel
        </div>
    </body>
</html>

CSS：

#toolbar{
    border:1px solid black;
    color:red;
    width:100px;
    height:200px;
}

#panel{
    border:1px solid black;
    color: blue;
    margin-left:auto;
    margin-right:auto;
    width:500px;
    height:500px;
}

Answer 1

请参阅： http://jsfiddle.net/thirtydot/ywc5f/

在HTML中，您可以在#toolbar内移动#panel，然后使用绝对定位。

<强> CSS：

#panel {
    position: relative;
}
#toolbar {
    position: absolute;
    left: -102px; /* width of #toolbar + border */
    top: -1px; /* border */
}

<强> HTML：

<div id="panel">
    Panel

    <div id="toolbar">
        Toolbar
    </div>
</div>

Answer 2

用户浮动。请参阅此fiddle。

Answer 3

你使用两个绝对宽度，所以把它们作为包装放在另一个div中，并给它中间宽度+（窄一个x 2）

然后在新的包装div上使用auto并在内部div上使用float left

如何将div定位为与另一个div齐平？

3 个答案: