0

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

我希望我的博客存档页面有一种砖石布局。但我希望所有帖子的大小都相同，以便创建一个完美的网格。布局正确显示是 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;

}

4

1 回答 1

0

您必须将所有.blog-post-wrapper元素浮动到左侧并为其添加特定高度。我使用 Chrome 做到了这一点，所有元素都完美对齐。

尝试这个：

.archive .blog-post-wrapper {
border: solid 1px #b3b3b3;
display: block;
float: left;
height: 262px;
margin: 5px 0 25px;
padding: 5px; 
}
于 2014-05-21T19:28:47.447 回答