ДИВ смещена, когда содержимое помещается внутри него

Question

привета им довольно новым делать фронтальные вещи у меня есть этот 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.

Также добавьте пробел: nowrap; к #tabular parent div