向左浮动，显示内联和高度自动行工作，但列堆叠答案

【问题标题】：Float left with display inline and height auto- rows working but columns stacking向左浮动，显示内联和高度自动行工作，但列堆叠
【发布时间】：2013-07-09 01:18:41
【问题描述】：

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

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

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

像这样： (http://3.bp.blogspot.com/-J3dkWTM2OCw/UbOnQutKSBI/AAAAAAAAFF4/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>

【问题讨论】：

我们也能看到你的 HTML 吗？

标签： css-float vertical-alignment blogger multiple-columns css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

至于每行 2 个单独的 div，没有。您看到的图像是以博客格式设置的。默认情况下，它设计为一个接一个地显示一个帖子（全部 8 个或您拥有的多个帖子）。我只是自定义了博客文章而不是默认的。因此，列和行位于同一部分中，就像博客一样。 HTML 太长，无法向您展示，但在每个部分之后都是确切的代码。默认情况下，博客会这样做。