我有一个容器div,并希望在中心div中放置三个div标签,我有正确的XHTML,但我遇到的麻烦是,将div中的三个div居中。
我现在将展示代码。
XHTML 1.0 Transitional(HTML)
<div id="container"> <div id="header"> </div> <div id="content"> <div id="contentbox"> </div> <div id="contentbox"> </div> <div id="contentbox"> </div> </div> </div>
层叠样式表(CSS)
#container { width: 900px; height: inherit; margin: 30px auto; } #content { float: center; width: inherit; height: inherit; margin-left: auto; margin-right: auto; position: absolute; } #header { margin: 0 auto; background-image: url(images/logo.png); background-position: center; width: 250px; height: 250px; } #contentbox { margin-left: auto; margin-right: auto; float: left; display: block; width: 250px; height: 250px; background-image: url(images/contentbox.png); }
要查看我要执行的操作的示例,请访问http://www.noxinnovations.com/portfolio/hfc/
我想知道如何将这三个内容框置于内容div中。
非常感谢, 亚伦布鲁尔
答案 0 :(得分:2)
答案 1 :(得分:2)
检查这是否是您想要的:
请注意,ID应该是唯一的,并且没有中心浮动这样的东西。要使div居中,你必须确保它相对于它的容器(这是我所知的大多数浏览器的默认行为),并使用followinf语法:
.something {
margin: 0 auto;
clear: both; // instead of float
}
答案 2 :(得分:1)
您可以随时执行以下操作:
<强> HTML:强>
<div id="container">
<div id="header"></div>
<div id="content">
<div class="contentbox"></div>
<div class="contentbox"></div>
<div class="contentbox"></div>
</div>
</div>
<强> CSS:强>
.contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
border: 1px dashed #999; /* just for visuals */
margin: 0 10px; /* just for visuals */
}
你肯定希望远离ID作为一般做法,你可以使用它们与javascript(jquery等)库。再加上它更干净。