为什么这个div不能正确居中?

时间:2013-02-25 17:10:20

标签: html css layout tumblr

开始我的第一个Tumblr布局。 出于某种原因,列都在左边,而不是在#content中。

不确定我做错了什么......非常感谢任何帮助。

另外......如果有人看到这个有任何建议或看到更好的方式来做这些专栏,我很乐意听到它。

由于 萨姆

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
    text-align: center;
}
#wrap {
    height: auto px;
    width: 920px;
    margin: 15px auto;
    border: 1px black solid;
}
#header {
    margin: 10px;
}
#content {
}
#column1 {
}
#column2 {
}
#column3 {
}
#footer {
}
.title {
    font-size:25px;
}
.subtitle {
    font-size:16px;
}
.column {
    width: 300px;
    float: left;

}
</style>
<title>{title}</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title">
{title}</div>
<div class="subtitle">
{description}</div>
</div>
<div id="content">
<div id="column1" class="column">
column1
</div>
<div id="column2" class="column">
column2
</div>
<div id="column3" class="column">
column3
</div>
</div>
<div id="footer" class="subtittle">
copyright {copyrightYears} {title}
</div>
</div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您的容器宽度超过900像素(300像素x 3)。

将列宽设置为33.3%(接近容器宽度的1/3)。

.column {
    width:33.3%;
    float: left;
}

http://jsfiddle.net/CZ9Lw/