Html <；p>；标记未按预期浮动

我已经将代码剥离为HTML和CSS。实际上，我可以用几种不同的方法来解决这个问题，但我的同事和我都很困惑是什么原因导致

p

标记没有移动到容器元素的顶部。它如何知道与其他容器中的其他

p

标记保持一致

通常一点调试就能解开谜团，但这次不行

我唯一确定的是，

内联块

是原因的一部分：

.mixtems.mix{
显示：内联块；
}
新闻标题
Lorem ipsum

---

试试这个，看看会发生什么：

.mixItems .mix{
    display: inline-block;
    vertical-align: middle;
}

---

默认情况下，垂直对齐设置为基线，这就是为什么

标记保持底部齐平的原因。
默认情况下
内联块
为
垂直对齐：基线
，因此您必须给
.mixems.mix
此：
垂直对齐：顶部


.mixtems{
填充：2%2%0；
文本对齐：对齐；
字体大小：0.1px；
-webkit转换：translateZ（0）；
-webkit背面可见性：隐藏；
}
.项目：之后{
内容：''；
显示：内联块；
宽度：100%；
}
.mixItems.mix，
.混合项目.间隙{
显示：内联块；
宽度：99%；
溢出：隐藏；
垂直对齐：顶部/*新*/
}
@介质和全部（最小宽度：568px）{
.mixItems.mix，
.混合项目.间隙{
宽度：49%；
}
}
@介质和全部（最小宽度：992px）{
.mixItems.mix，
.混合项目.间隙{
宽度：23.5%；
}
}
.混合物品.混合{
文本对齐：左对齐；
背景色：#f7f7f7；
利润底部：2%；
/*显示：无*/
}
.mixItems.mix.gridView img{
宽度：100%；
显示：块；
}
.mixItems.mix.listView img{
显示：无；
}
.mixItems.mix.abstract{
颜色：#000；
字体大小：12px；
填充：0 1.5em 1.5em 1.5em；
}
.mixItems.mix.Newhead{
颜色：#666；
字体大小：12px；
填充：1.5em 1.5em 0 1.5em；
字体大小：14px；
字体大小：粗体；
}

新闻标题
Lorem ipsum 20160115

新闻标题
Lorem ipsum 20130115

新闻标题
Lorem ipsum 20130230

新闻标题
Lorem ipsum 20150430

新闻标题
Lorem ipsum 20140115

新闻标题
Lorem ipsum 20160115

新闻标题
Lorem ipsum 20140330

新闻标题
Lorem ipsum 20120315

请在您的OP中包含最少数量的代码，不要仅依靠Codepen链接保持活动状态。谢谢，哇。这就解释了。谢谢不客气！如果这对您有帮助，请确保您将此答案标记为已接受，以便进一步阅读：）有关
inline block
的默认垂直对齐的信息非常有用。此外，我现在意识到，所有p标记的顶部都是相同的，因为它们具有完全相同的副本，所以我忽略了这一点。