将几个div放在一个父div中

我已经在这个方向看到了几个问题，但没有任何帮助。每个人都说只是把父母的职位设置为亲戚，将孩子的职位设置为绝对。但我的问题是，每个div都在我父母div的0/0点。似乎内在的因素并不相互了解。将几个div放在一个父div中

这里是我的网页应该是这样的：

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点粉红色的？

在此先感谢

来源

2012-07-24 4ndro1d

嗨，我猜你只是一直在做的CSS/HTML一会儿？从标题中移除相对位置，并从其他项目中删除绝对位置。当你这样做时，你的布局的其余部分会更容易。 – 2012-07-24 10:29:17

是的，通常我只是在做Java/Android编程。好的，谢谢你的提示。 – 4ndro1d 2012-07-24 10:40:44

您需要正确地关闭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您需要调整宽度抹灰和你做！

来源

2012-07-24 10:22:41 Dipak

非常感谢！ :) 如果我可以的话，我会投你一票：/ – 4ndro1d 2012-07-24 10:32:32

不客气！ :) – Dipak 2012-07-24 10:35:34

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

你应该做的只是删除position属性，将所有的东西都留下并设置宽度（请注意，你需要在div中的内容才能正确呈现）。

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

来源

2012-07-24 10:27:04 Ben

你应该这样的代码： - 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-24 10:42:00

将几个div放在一个父div中

回答

相关问题