1

我已经看到几个问题朝着这个方向发展，但没有任何帮助。每个人都说只需将父 div 位置设置为相对，将子 div 位置设置为绝对。但我的问题是每个 div 都在我父 div 的 0/0 点。似乎内部元素彼此不知道。

这是我的页面的样子：

http://imageshack.us/photo/my-images/854/unbenanntgoc.png/

在我的 html 中，我只定义了我的 div：

<div id="content">

<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />

</div>

所以导航图像和标签内容 div 应该是浮动的。

这就是我的 CSS 的样子：

@charset "utf-8";

body {
    background-color:#33FF00;
}

#header {
    height:100px;
    background-color:#FFFFFF;
    position:relative;
}

#naviContent {
    width:25%;
    background-color:#F0F;
    float:left;
}

#imageContent {
    background-color:#000;
    position:absolute;
    float:left;
    width:800px;
    height:600px;
}

#tagContent {
    background-color:#900;
    position:absolute;
    float:left;
    width: 25%;
}

#textContent {
    background-color:#0000FF;
    clear:both;
}

#content {
    height:1600px;  
    width:1200px;
    background-color:#999999;
    margin-left: auto; 
    margin-right: auto;
    padding:10px;
    position:relative;
}

所以也许有人可以告诉我为什么我的所有元素（黑色、黄色、红色、灰色和绿色）都定位到粉红色元素的 0/0 点？

提前致谢

4

3 回答 3

2

您需要正确关闭 DIV -

<div id="content">

<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text  </div>

</div>

编辑： 工作小提琴你需要调整浮动宽度，你就完成了！

于 2012-07-24T10:22:41.927 回答
0

绝对位置不是布局页面的标准方式。

您应该做的只是删除位置属性，将所有内容浮动并设置宽度（请注意，您需要 div 中的内容才能正确呈现）。

您可能想研究 CSS 网格系统，例如960.gs，因为它们使用预定义的类以标准化的方式为您处理这部分开发。

于 2012-07-24T10:27:04.660 回答
0

你应该这样编码：-http: //tinkerbin.com/J9CCZXRL

CSS

#content {
background:pink;
  width:500px;
  padding:10px;
  -moz-box-sizing:border-box;
  overflow:hidden;
}



#header {
  background:red;
  height:100px;

}

#left {
background:green;
  width:100px;
  height:400px;
  float:left;
}

#middle {
background:blue;
  width:260px;
  float:left;
  height:400px;
  margin-left:10px;
}
#right {
background:yellow;
  width:100px;
  float:right;
  height:400px;
}

#footer {
background:grey;
height:100px;
  clear:both;
}

HTML

<div id="content">
  <div id="header"></div>
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
  <div id="footer"></div>
</div>
于 2012-07-24T10:42:00.953 回答