垂直对齐文本“框”

Question

我已附上我网页的当前屏幕截图，以便更清晰。我想移动＆＃34;数据结构和算法＆＃34;文本圈直接位于紫色文本圈下方。我假设紫色文本圈下面的空白区域的原因是左上角有一个大的深蓝色，但我似乎无法弄清楚如何覆盖它。目前，文本＆＃34;框＆＃34;都具有display：inline-block属性，以便它们并排显示。我试图搜索一个类似的问题，但没有找到任何这个具体的问题。

Answer 1

您还没有发布任何代码，因此无法看到您如何编写元素，但灵活的框模型或display: flex;似乎应该对您有用。

正如您在此Fiddle中看到的那样：

display: flex;

和

flex-wrap: wrap;

导致你的div填充空白区域，即使它们的大小不同。