html - 如何在 div 中的同一基线上对齐 h2 和 p

Question

我有一个高度为 70px/4.375em 的帖子标题 div 其中有一个类别h2和一个p时间戳

我希望它对齐，如 this picture 中所示 (在 Photoshop 中制作)

这是我的 HTML:

<div class="post-header" style="background-color:#9377d8">
    <h2 class="category">Technology</h2>
    <p class="timestamp">Saturday, today</p>
</div>

还有我的 CSS:

.post-header{
    height:4.375em;
    width:25em;
    margin-bottom:0;
    float:left;
}
.category{
    color:white;
    display:inline;
    float:left;
    margin:0.625em;
}

.timestamp{
    color:white;
    display:inline;
    float:right;
    margin:0.625em;
}

请帮助我使用 CSS 以获得我想要的设计

Answer 1

您可以按如下方式更改您的 CSS:

.post-header {
    height:4.375em;
    width:25em;
    margin-bottom:0;
    display:block;
}
.category {
    color:white;
    display:inline-block;
    width:45%;
    margin:0.625em;
}
.timestamp {
    color:white;
    display:inline-block;
    text-align:right;
    margin:0.625em;
    width:40%;
}

这样，您可以更好地控制布局，因为您可以指定元素的宽度和垂直对齐方式。正如我们所说，我会使用百分比来表示利润率，但当然这取决于您

Visit fiddle看看它的实际效果