保持div內的填充

我在Bootstrap中使用帶有標題的flexslider畫廊，並且我希望將文字保留在標題框的底部，半透明填充填充幻燈片放映框的整個高度。我已經將填充設置爲100％，但它運行在框的頂部，並覆蓋了我的導航欄。保持div內的填充

我猜這是一個簡單的修復，但我一直無法弄清楚。

鏈接到網站：http://parkerrichard.com/studiogreen/html/project-01.html

CSS：

.flexslider{ 
background:none!important; 
border:none!important; 
box-shadow:none!important; 
margin:0px -15px 0px 0px!important; 
} 

.right { 
padding-top: 100%!important; 
bottom: 0; 
right: 0; 
margin-bottom: 0px; 
} 

.flex-caption { 
position: absolute; 
text-align: left; 
background:rgba(255, 255, 255, 0.7); 
z-index: 1; 
padding: 20px; 
font-size: 11px; 
width: 300px; 
}

HTML：

 <!-- slideshow gallery -->   
     <div class="col-lg-10 col-md-9 col-sm-9"> 
      <div class="flexslider"> 
       <ul class="slides"> 
       <li> 
        <img src="img/project-1_01.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         This home exudes quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge.</p> 
       </li> 
       <li> 
        <img src="img/project-1_02.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p> 
       </li> 
       <li> 
        <img src="img/project-1_03.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p> 
       </li> 
       <li> 
        <img src="img/project-1_04.jpg" /> 
       </li> 
       <li> 
        <img src="img/project-1_05.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p> 
       </li> 
       <li> 
        <img src="img/project-1_06.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p> 
       </li> 
       <li> 
        <img src="img/project-1_07.jpg" /> 
       </li> 
       <li> 
        <img src="img/project-1_08.jpg" /> 
        <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
         Location: Los Altos Hills, CA<br /> 
         Architect: SDG Architects<br /> 
         Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p> 
       </li> 
       </ul> 
      </div> 
     </div>

來源

2014-12-19 Parker Richard

百分比填充是相對於*寬*父元素的，所以你指望它可能無法正常使用。我建議使用'height：100％'或'bottom：0; top：0;'作爲半透明疊加層，然後爲覆蓋元素的「bottom：0」對齊的文本創建一個子元素。 – showdev 2014-12-19 02:11:26