Question

我在Bootstrap中使用带有标题的flexslider图库，我希望将文本保留在标题框的底部，半透明填充填充幻灯片框的整个高度。我已经将填充设置为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

只需使用box-sizing: padding-box即可。这是实验技术，但是it's pretty well supported in major browsers。我试一试。 请注意，您可能需要使用vendor prefixes才能在所有浏览器中正常使用此功能。

Answer 2

一种选择是将容器设置为overflow: hidden;：

.slides {overflow: hidden;}

在div中保持填充

2 个答案: