html - CSS 设置帖子摘录和标题 float 在特色图片旁边

Question

我正在尝试将帖子标题和帖子摘录设置为在特色图片旁边的日期下方对齐，但我只能设置日期而不能设置标题，但除外。

这是我的日期 CSS，它是一个简单的 float :

.post-thumbnail {
  width: 24%;
  float: left;
  margin-right: 20px;
}

HTML

<div class="post-meta group">
        <p class="post-category"><?php the_category(' / '); ?></p>
        <p class="post-date"><?php the_time('j M, Y'); ?></p>
    </div><!--/.post-meta-->

    <h2 class="post-title">
        <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </h2><!--/.post-title-->

    <?php if (ot_get_option('excerpt-length') != '0'): ?>
    <div class="entry excerpt">             
        <?php the_excerpt(); ?>
    </div><!--/.entry-->
    <?php endif; ?>

当我将 float: left 添加到类 .post-meta 时，它会移动标题和摘录，但不会在帖子元下对齐。

这是我的新 www.gazetbits.com。任何指南将不胜感激，或者将标题和帖子分组到 Div 中并应用 float 是否正确。

谢谢

Answer 1

.post-meta 占据了太多的高度。添加此规则后，我实现了您想要的行为:

.post-meta {
    height: 22px;
}

或改变显示类型:

.post-meta {
    display: table;
}