Question

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

divs布局：

<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像素）和其他位置的菜单（例如vertial：top），水平：中间和右侧之间（标题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;
}

你可以在这里看到小提琴：

http://jsfiddle.net/SkLvX/

div和header中的位置问题

1 个答案: