将内容放入其中时 div 未对齐答案

【问题标题】：div is misaligned when contents are put inside it将内容放入其中时 div 未对齐
【发布时间】：2016-10-14 13:40:45
【问题描述】：

嗨，我对做前端的东西还很陌生

但是当我为其内容添加代码时，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;
}

知道我做错了什么吗？还是改进我的代码？

【问题讨论】：

标签： php html css laravel

【解决方案1】：

Inline-block 元素依赖于空格，这意味着 HTML 中的空格是屏幕上的空格。

尝试删除@foreach 循环开始处多余的空白行。

同时添加空格：nowrap;到#tabular 父 div

【讨论】：

您可能会想到pre 与空格相关的标签。默认情况下，内联块元素不依赖于空格。

【解决方案2】：

将vertical-align: top; 添加到您的内联块应该可以解决它。

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

原因是vertical-align的默认值是baseline，当你的内联块内的内容有不同的长度/高度时，就会导致错位。

【讨论】：