Question

我已经看到了朝这个方向发展的几个问题，但没有任何帮助。每个人都说只需将父div位置设置为relative，将子级位置设置为absolute。但我的问题是每个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>

因此navi图像和标记内容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点？

提前致谢

Answer 1

您需要正确关闭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>

编辑： Working Fiddle您需要调整浮动宽度，然后就完成了！

Answer 2

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

你应该做的只是移除位置属性，向左移动所有东西并设置宽度（请注意，你需要div中的内容才能正确渲染）。

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

Answer 3

你应该像这样编码： - 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>

在一个父div中放置几个div

3 个答案:

在一个父div中放置几个​​div

3 个答案:

在一个父div中放置几个div