Question

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

我正在使用 border-box：box-sizing AND 自我清算浮动。我也尝试使用clearfix创建一个空div。

＆＃13;

 /* 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;
 }

＆＃13;

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

＆＃13;

Answer 1

这个问题的发生是因为具有类＆＃34; work＆＃34;的部分，其高度为550px，但其子级的高度超过550px。

现在页脚标签位于节标签之下，节的子节点已超过该标签，您无法看到页脚。

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

Collasping浮动画廊

1 个答案: