0

开始我的第一个 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>
4

1 回答 1

0

您的容器宽度超过 900 像素（300 像素 x 3）。

将列宽设置为 33.3%（足够接近容器宽度的 1/3）。

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

http://jsfiddle.net/CZ9Lw/

于 2013-02-25T17:25:15.710 回答