Question

我是网页设计的新手，非常感谢任何人的帮助！

我希望我的博客存档页面具有一种砌体布局。但我希望帖子都大小相同，以便创建一个完美的网格。 Safari正在显示正确的布局，但在Chrome和Firefox中，列正在混乱。标题将在一列中，特色图像将延伸到下一列。

我尝试添加{max-width：75％;高度：900px;}这解决了Chrome中的问题，但不是在Firefox中，并且完全弄乱了Safari中的布局（在侧边栏上重叠的列）。

以下是博客存档页面：http://thehousecandy.com/category/all-things-decor/

这是我目前使用的CSS：

.archive #content {
column-count: 3;
column-gap: 1em;
column-rule: 0 solid #666;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 0 solid #666;
-o-column-count: 3;
-o-column-gap: 1em;
-o-column-rule: 1px solid #666;

}

.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
margin: 5px 0 25px;
padding: 5px;

}

.archive .image-wrap {
width: 220px;
height: 170px;

}

.archive .thumbnail img {
padding: 0;
height: 100%;
width: 100%;

}

.archive #content p {
display: none;

}

.archive #content .blog-big {
margin-bottom: 0 0 10px 0;

}

.archive .blog-big {
margin: 0;
padding: 0;

}

.archive h2.post-title {
background-color: #ffffff;
max-width: 100%;
display: block;
text-align: center;
padding-top: 8px;
padding-bottom: 5px;
margin: 0;
color: #fff;
text-decoration: bold;
font-family: 'questrial' !important;
height: 45px;
font-weight: bold;
line-height: 8px;

}

.archive #content h2.post-title a {
font-size: 16px;
text-decoration: bold;

}

.archive #content .socials {
display: none;

}

.archive #content .blog-signature img {
display: none;

}

Answer 1

您必须将所有.blog-post-wrapper元素浮动到左侧并为它们添加特定高度。我使用Chrome完成了这项工作，并且所有元素都完美对齐。

试试这个：

.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
float: left;
height: 262px;
margin: 5px 0 25px;
padding: 5px; 
}

不同浏览器中的砌体博客布局问题

1 个答案: