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

Question

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

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

我试着添加{max-width：75％; height：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; 
}