当内容放入其中时，div未对齐

Question

嗨我非常擅长做前端的东西我有这个div里面包含这个迷你div当它只有一个p标签输入这里是它看起来像

但是当我为其内容添加我的代码时，div未对齐 现在它看起来像这样

这里的票价是我正在使用的代码

<div id="tabular" style="display:none">
        @foreach($NSAdata as $list)

        <div class="divcont">
            <p>Filename :</p>{{$list->filename}}
        </div>
        @endforeach
    </div>

.divcont
{
    background-color: pink;
    display: inline-block;
    width:  300px;
    height: 150px;
    margin-bottom: 1%;
    margin-right: 1%;
}
#tabular
{
    height: 28.125em !important;
    overflow-y: auto;
}

任何想法我做错了什么？或者改进我的代码？

Answer 1

将vertical-align: top;添加到内联块应修复它。

.divcont {
  ...
  display: inline-block;
  vertical-align: top;
}

原因是vertical-align的默认值为baseline，当内联块内的内容具有不同的长度/高度时，会导致错误对齐。

Answer 2

内联块元素依赖于空格，这意味着HTML中的空格是屏幕上的空格。

尝试删除@foreach循环开头的额外空白行。

还添加white-space：nowrap;到#tabular父div