浮动左侧div转移到底部

Question

我使用css来浮动我的div彼此离开，这给了我3行3列，因为我需要。但由于某些奇怪的原因，第二行中的第一个div被推到第二行的第2列而不是第一列。

这是一张照片示例。

这是使用的html / php。

<div class="medium-8 column fourth-post-wrap">
  <div class="medium-8 fourth-post-img">      <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
    <?php the_post_thumbnail('fourth-post'); ?>
    </a>
  </div>
  <div class="fourth-post-inner">
    <h1 class="fourth-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    <span class="fourth-by-line"> BY: <?php the_author_posts_link(); ?></span>
    <span class="category-fourth"><?php $cat = get_the_category(); $cat = $cat[0]; echo '<a href="' . get_bloginfo('url') . '/category/' . $cat->category_nicename . '">'; echo $cat->cat_name; echo  '</a>'; ?></span> 
  </div>
</div>

这是css。

 .fourth-post-wrap {
 max-width:385px;
 background:#fff;
 padding:0px;
 margin:0px 10px 20px 20px;
 float:left;
 overflow:hidden;
 border-top:2px solid #c7363b;
 }

有人可以帮我解决这个问题吗？

Answer 1

尝试删除浮动属性＆amp;添加display：inline-block

.fourth-post-wrap {
    max-width:385px;
    background:#fff;
    padding:0px;
    margin:0px 10px 20px 20px;
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    border-top:2px solid #c7363b;
}

Answer 2

给我一​​个最小高度的财产。

像这样

.fourth-post-wrap { min-height:350px; /*approximately*/ }