我在解决一堆浮动div问题时遇到了一些问题.我搜索了很多(特别是在这里和这里),但我似乎错过了一些东西.我会发布我的代码,希望有人在这里可以看到问题是什么...
我想要完成的是这些方面
截图http://efredericks.net/layout.PNG
我目前看到的行为是一切都正常浮动,但被推向左侧.不管我做了什么,我似乎无法将它放在中心位置.
我的外部容器在浏览器中居中,但内部没有任何内容.
HTML
<body>
<!-- outer_container - centers for IE -->
<div id="outer_container">
<!-- container - wrapper for content -->
<div id="container">
<!-- header - logo : menu -->
<div id="hdr">
<div id="hdr_right">
<h1><a href="#" id="lhome">logo</a></h1>
<div id="menu">
<ul>
<li><a id="menu_i1" href="#">item 1</a></li>
<li><a id="menu_i2" href="#">item 2</a></li>
<li><a id="menu_i3" href="#">item 3h</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- /header -->
<!-- main -->
<div id="main">
<!-- problem area here -->
<div id="outer">
<div class="inner">a</div>
<div class="inner">b</div>
<div class="inner">c</div>
<div class="clear"></div>
<div class="inner">a</div>
<div class="inner">b</div>
<div class="inner">c</div>
<div class="clear"></div>
</div>
</div>
<!-- /main -->
</div>
<!-- /container -->
</div>
<!-- /outer_container -->
</body>
CSS
* {
margin: 0px;
padding: 0px;
font-family: Tahoma, Arial, sans-serif;
color: #888750;
}
img {
border: 0px;
}
body {
background: #000;
}
margin: 0 auto;
position: relative;
}
#hdr {
background: #000;
height: 99px;
}
#hdr_right {
margin: 30px 2px 0px 0px;
height: 75px;
float: right;
}
#hdr img {
float: left;
border: 0px;
margin: 5px 0px 0px 5px;
}
#hdr ul {
margin-top: -10px;
}
#hdr li {
float: left;
padding: 0px 5px;
}
#main {
text-align: left;
background: #333;
}
.clear {
clear: both;
}
#outer {
overflow: auto;
padding: 5px;
width: 790px;
margin: 0 auto;
text-align: center;
}
.inner {
float: left;
background: #181818;
margin: 5px;
width: 200px;
}
从我的理解,你想要的中心div,div#main而不是左边的微小？
如果是这种情况那么你可以做很多事情,你可以将每个边距div.inner增加到大约30px:
.inner {
float: left;
background: #181818;
margin:5px 30px;
width: 200px;
}
或者将宽度减小div#outer到630px(并删除text-align,因为你真的不需要):
#outer {
overflow: auto;
width: 630px;
margin: 0 auto;
}
希望这就是你要找的东西!