我试图在我的网站上居中放置两列,但存在一些问题。每次更改的结果都是左侧位置(参见picture http://i46.tinypic.com/5tov7.jpg)。我究竟做错了什么?这是我的 CSS:
body {
background - image: url("../img/gray.png");
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #cc0000;
text - align: center;
}
#wrapper {
margin: 100px;
width: 1280px;
}
#leftcolumn {
float: left;
background - image: url("../img/gray.png");
margin: 10px 0px 10px 0px;
padding: 10px;
height: 682px;
width: 460px;
}
#rightcolumn {
float: left;
color: #333;
border: 1px solid # ccc;
background: #F2F2E6;
margin: 10px 0px 10px 0px;
padding: 10px;
height: 500px;
width: 439px;
display: inline;
position: relative;
}
Thanks
由于两列的宽度小于包装器的宽度(即 959px 与 1280px),因此您需要将两列放置在固定宽度的容器内:
<div id="wrapper">
<div id="column_container">
<div id="column1"></div>
<div id="column2"></div>
</div>
</div>
然后做类似的事情:
#column_container {
width: 959px;
margin: 0 auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)