1

我总共有 8 个盒子，里面有图片。我在每行（总共 2 行）中有 4 个框（4 列）。它们设置为 float: left 和 display: inline。当高度固定时，列和行都完美对齐。

像这样：（http://4.bp.blogspot.com/-o_rRBylW7Gk/UbOnL-IHSTI/AAAAAAAFFw/udM5_Bhhz7k/s640/post-sized.PNG）

但是当我添加height:auto......第三列的第二行堆栈。

像这样：（http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAFF4/qTsBLn84ukE/s1600/post-auto.PNG）

期望的结果是所有行和列都对齐，而不会倾斜和拉伸图像。只要实现了期望的结果，我对如何完成（jQuery 或其他）没有偏好。

我厌倦了清除两者，垂直对齐到顶部，之后的clearfix，显示表格单元格而不是显示内联等。我尝试了我可以在网上找到的一切。

这是CSS：

.post{
    float:left;
    display:inline-block;
    list-style: none;
    width: 200px;
    height: auto;
    overflow:hidden;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 10px;  
    background-color: white !important;
}

.post-body { 
    width: 100% !important;   
    height: auto;
    overflow: hidden;
    padding: 0px !important;
    margin: 0px !important;
}

.post img {
    width: 100% !important;
    height:auto;
    padding: 0px;
    margin: 0px;
}

它位于 Blogger.com (blogspot) 平台上。

添加整个 HTML 很困难，您必须了解 Blogger 格式或至少了解 XML 代码，但以下是主要部分：

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:includable id='post' var='post'>  
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</div>
</b:includable>
</b:includable>
</b:widget>
</<b:section>
4

2 回答 2

3

此页面中接受的答案：div float 或 display inline-block to left AND top可能是一个解决方案。JQ-砌体： http: //masonry.desandro.com/

于 2013-07-08T17:18:41.467 回答
0

我想你有两个主要的 div。一个用于第一行，一个用于第二行，可能还有更多的 div 在里面保存图像？如果是这样，请尝试放置：

 <div style="clear:both;">
 </div>

在第一行 div 的结尾和第二行 div 的开头之间

于 2013-06-08T23:08:58.173 回答