css - 折叠花车画廊

Question

我的图库页面不允许我在页面底部添加页脚或创建空白区域。

我正在使用 border-box : box-sizingAND 自清 float 。我也试过用 clearfix 创建一个空的 div。

 /* self-clearing floats*/
 .work:after,
 .section:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 .work {
   height: 550px;
   margin-bottom: 40px;
 }
 .work .col {
   float: left;
   width: 49%;
   height: 100%;
 }
 .work .col:first-child {
   margin-right: 2%;
 }
 .work .col > div {
   top: 0;
   position: relative;
   overflow: hidden;
   margin-bottom: 4%;
   text-align: center;
   display: block;
 }
 .work .col > .lrg {
   width: 100%;
   height: 100%;
 }
 .work .col > .sm {
   margin-right: 4%;
   float: left;
   width: 48%;
   height: 48%
 }
 .work .col > .sm.last {
   margin-right: 0;
 }
 .work img {
   width: 100%;
   height: 100%;
   display: block;
 }
 .footer {
   height: 100px;
   clear: both;
 }

<section class="work">
  <div class="col">
    <div class="lrg">
      <img src="./gnomes14.jpg" />
    </div>
    <div class="sm">
      <img src="./gnomes2.jpg" />
    </div>
    <div class="sm last">
      <img src="./gnomes3.jpg" />
    </div>
  </div>
  <!-- end.col-->
  <div class="col">
    <div class="sm">
      <img src="./gnomes10.jpg" />
    </div>
    <div class="sm last">
      <img src="./gnomes11.jpg" />
    </div>
    <div class="lrg">
      <img src="./gnomes8.jpg" />
    </div>
  </div>
  <!-- end.col-->
</section>
<div class="footer">
  <p>help</p>
</div>

Answer 1

发生此问题是因为具有类“工作”的部分的高度为 550 像素，但其子项的高度超过 550 像素。

现在页脚标签在部分标签之下，部分的子部分在该标签之上，您看不到页脚。

删除 section.work 的子项并为其设置背景和页脚并查看这些标签，然后在 section.work 上设置新标签以防止这些问题。