Правильная высота li

Question

Я использую загрузчик, и у меня есть HTML-код. И я хочу иметь 2 типа li:

1. С фоновым изображением

2. Элемент списка

просто содержание

Но у меня есть проблема - я не могу установить высоту li с изображением bg = высота li с содержимым.

<div class="row">
    <ul class="block-list">
        <li class="col-md-3 col-sm-12 info-section-grid-colored-1"></li>
        <li class="col-md-3 info-grid-section-ncl">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </li>
        <li class="col-md-3 col-sm-12 info-section-grid-colored-1"></li>
        <li class="col-md-3 col-sm-12 info-grid-section-ncl">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </li>
    </ul>
</div>

Мой css:

.block-list {
padding-left: 0;
}

.block-list li {
position: relative;
float: left;
height: 100%;
}

.info-section-grid-colored-1 {
background: url(../images/1.jpg) center no-repeat;
background-size: cover;
padding: 50px 40px;
height: 100%;
float: none;
display: table-cell;
border: none;
}

.info-grid-section-ncl {
padding: 50px 40px;
float: none;
display: table-cell;
border: none;
text-align: center;
}

Answer 1

Попробуйте фиксированную высоту для всех тегов li, как это.

.block-list li {
  position: relative;
  float: left;
  height: 50px;
}