保持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