CSS将帖子摘录和标题设置为浮动在特色图像旁边

时间:2014-09-29 10:12:06

标签: html css

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

这是我日期的CSS,它是一个简单的浮点数:

.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并应用浮动。

由于

1 个答案:

答案 0 :(得分:0)

.post-meta需要太多高度。我实现了添加此规则所需的行为:

.post-meta {
    height: 22px;
}

更改显示类型:

.post-meta {
    display: table;
}