浮动左侧显示内联和高度自动行工作但列堆叠

I have a total of 8 boxes with images inside. I have 4 boxes across (4 columns) in each row (2 rows total). They are set to float: left and display: inline. The columns and rows all align perfectly when the height is fixed.

我总共有8个盒子里面有图像。我每行有4个盒子(4列)(总共2行)。它们设置为float:left和display:inline。当高度固定时,列和行都完美对齐。

Like so: (http://4.bp.blogspot.com/-o_rRBylW7Gk/UbOnL-IHSTI/AAAAAAAAFFw/udM5_Bhhz7k/s640/post-sized.PNG)

像这样:(http://4.bp.blogspot.com/-o_rRBylW7Gk/UbOnL-IHSTI/AAAAAAAAFFw/udM5_Bhhz7k/s640/post-sized.PNG)

But when I add height:auto... the 2nd row stacks at the 3rd column.

但是当我添加高度:auto ...第3列的第2行堆栈。

Like so: (http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAAFF4/qTsBLn84ukE/s1600/post-auto.PNG)

像这样:(http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAAFF4/qTsBLn84ukE/s1600/post-auto.PNG)

The desired result is for all rows and columns to align without the images being skewed and stretched. As long as the desire result is achieved, I don't have a preference on how this is done (jQuery or otherwise).

所需的结果是所有行和列对齐,而不会使图像倾斜和拉伸。只要达到了预期的结果,我就不会优先考虑这是如何完成的(jQuery或其他)。

I tired clear both, vertical align to top, the clearfix after, display table-cell instead of display inline, etc.. I tried everything I could find online.

我累了两个,垂直对齐顶部,clearfix后,显示table-cell而不是显示内联等。我尝试了我能在网上找到的一切。

Here is the CSS:

这是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;
}

It's in the Blogger.com (blogspot) platform.

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

It's difficult to add the whole HTML, you would have to understand the Blogger format or at least XML codes but here are the main sections:

添加整个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>

2 个解决方案

#1

The accepted answer in this page: div float or display inline-block to left AND top might be a solution. JQ-Masonry: http://masonry.desandro.com/

此页面中接受的答案:div float或显示内联块到左侧和顶部可能是一个解决方案。 JQ-Masonry:http://masonry.desandro.com/

#2

I presume you have two main divs. One for the first line and one for the second and potentially more divs inside holding the images? If so try placing this:

我认为你有两个主要的div。一个用于第一行,一个用于第二行,可能还有更多div用于保存图像?如果是这样,请尝试放置:

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

inbetween the end of the first line div and the start of the second line div

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

#1