2017-02-28 54 views
0

我使用引導,我有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; 
} 

回答

0

儘量固定高度,這樣所有的李標籤。

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