javascript - 页脚 div 位于另一个 div 下

Question

我有一个包含一些文本的 div 和另一个我用照片列表和页脚 div 填充的 div。页脚 div 应该位于 photos div 下方，但它位于其下方。这是我的代码:

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  float: left;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}

<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
  <div id="footer" style="background:blue;height:100px;width:100%">
    <div style="background:blue;height:200px;width:100%"></div>
  </div>

这是它的屏幕截图

如何修复它？

Answer 1

问题可能是由于 float 造成的。尝试使用 Clearfix

尝试将此类添加到注释中。 (修改了一些HTML)

尝试一下。

HTML

<div>
  <p>Software Engineer
</div>

<div id="test"> 
  <div id="comments" class="clearfix">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>        
  </div>
</div>

<div id="footer" style="background:blue;width:100%">
  <div style="background:blue;width:100%"> footer div here</div>
</div>

CSS

.clearfix::after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  float: left;
  width: 280px;
}

div.gallery:hover {
  border: 2px solid #777;
}

div.gallery img {
  width: 80%;
  height: auto;
  margin: auto;
}

div.desc {
  padding: 15px;
  text-align: left;
}

.clearfix::after {
  content: "";
  width: 100%;
  display: table;
  clear: both;
}

<div>
  <p>Software Engineer
</div>

<div id="test">
  <div id="comments" class="clearfix">
    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 74</i>
        <i class="fa fa-comment-o" style="color:#333;">  0</i>
        <button id="1547014733616513536_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 65</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1535724697949655394_414010731">comment</button>
      </div>
    </div>

    <div class="gallery">
      <img src="https://example.com">
      <div class="desc">
        <i class="fa fa-thumbs-o-up" style="color:red;"> 68</i>
        <i class="fa fa-comment-o" style="color:#333;">  1</i>
        <button id="1501575131271622723_414010731">comment</button>
      </div>
    </div>
  </div>
</div>

<div id="footer" style="background:blue;width:100%">
  <div style="background:blue;width:100%"> footer div here</div>
</div>

Link for reference

希望这有帮助......