div 안에 패딩 남기기

Question

부트 스트랩에 캡션이있는 플랙스 슬라이드 갤러리를 사용 중입니다. 슬라이드 쇼 상자의 전체 높이를 채우는 반투명 패딩으로 텍스트를 캡션 상자의 아래쪽에 유지하려고합니다. 패딩을 100 %로 설정했는데 상자 상단에서 흘러 내 탐색 막대를 덮습니다.

나는 이것이 간단한 수정이라고 생각하지만 나는 그것을 알아낼 수 없었다. 사이트에

링크 : 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> 

Answer 1

하나의 옵션은 overflow: hidden;에 컨테이너를 설정하는 것입니다 :

.slides {overflow: hidden;} 

Answer 2

간단히 box-sizing: padding-box를 사용합니다. 이것은 만료 기술이지만 it's pretty well supported in major browsers입니다. 나는 그것을 줄 것이다. 모든 브로셔에서 올바르게 작동하려면 vendor prefixes을 사용해야 할 수도 있습니다.