正确的李高度

Question

我使用bootstrap并且我有html代码。我希望有两种类型的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;
}