css - 标题和主要位置的 div 问题

Question

我有一个包含 3 个父 div 的页面，现在我在将 div 定位在标题 div 中时遇到问题。我的代码是这样的:

div布局:

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
        <div id="menu">menu</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>

css 是这样的:

.body {
 background-color: #ffffff;
 margin: 0px;
 background-repeat: repeat-x;
 background-image: url(imgs/back.png);
}

#layout {
 margin:auto;
 width: 1024px;
 background-color:  #ffffff;
}

#main {
   background-color:  #ffffff; 
}

#header {
 background-color:#0F0;
 height: 300px;
}

#body {
 margin-left: 180px;
 margin-right: 180px;
 padding: 5px;
 background-color:  #ffffff;
}

#footer {
 margin-left: 180px;
 margin-right: 180px;
 padding: 0px;
 background-color:  #ffffff;
}

#right {
 float: right;
 width: 180px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#left {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

#clear {
   clear:both; 
}

我想将标题 div 的位置(例如垂直:中心，水平:0 px(标题 div 的 0 像素而不是整个页面的像素)放在左侧)和其他位置的菜单(例如垂直:顶部, horizo​​ntal: 在中心和右侧之间(又是header div的中心和右侧)。

我将不胜感激。

感谢大家。

Answer 1

如果您能澄清您的问题，我会更有帮助。

我不确定您在页眉位置方面的要求。

这是一种在中间列和右列之间移动菜单的方法。将菜单和右侧列嵌套在另一个右对齐的 div 中。出于示例的目的，我将其称为 right-container。

这是HTML

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right-container">
           <div id="menu">menu</div>
           <div id="right">right</div>
        </div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>​

下面是我添加的 css 语句:

#right-container {
 float: right;
 width: 360px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#menu {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

你可以在这里看到 fiddle :

http://jsfiddle.net/SkLvX/