我使用bootstrap并且我有html代码。我希望有两种类型的li:
带图像背景
列出项目
只是内容
但是我有问题 - 我不能设置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;
}
答案 0 :(得分:0)
尝试所有li标签的固定高度。
.block-list li {
position: relative;
float: left;
height: 50px;
}