页脚div受到另一个div的影响

时间：2017-07-14 08:48:50

标签： javascript jquery html css

我有一个div有一些文字，还有一个我用照片和页脚div填充它。页脚div应位于照片div下方，但它位于其下方。这是我的代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这里是Ans的截图

enter image description here

我该如何解决？

6 个答案:

答案 0 :(得分：2)

问题可能是因为花车。尝试使用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

希望这会有所帮助......

答案 1 :(得分：1)

更新您的花车未被清除。使用@Chandras示例，或者您可以添加CSS ID #footer { clear:both; }并在您的页脚div中调用它，就像您已经在示例中一样。 <div id=footer">。

奖励，将您的style="width:100%; height:200px; background:blue; color:#FFF;"行添加到您的css文件中，并从div页脚标记中一起删除样式attr。

在你的示例片段中，我使用了一个带有清除页脚ID的类。 检查一下：

＆＃13;
＆＃13; 
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;
}
   
#footer {
    clear:both;
    width:100%; 
    height:200px; 
    background:blue; 
    color:#FFF;
    
}
＆＃13; 
<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">Footer
  </div>
＆＃13;
＆＃13;
＆＃13;

<强> FYI Bootstrap V3 即将发布v4。 CDN：Bootstrap CDN link BS V3网格系统：specific grid layout system

Bootstrap是一个开源插件，它使用已为您编码的标准化css和js规则集。

在许多其他令人敬畏的css和js添加中，使用称为cols的标准化类来浮动html标记。这些与媒体捷径一起使用：xs，sm，md，lg，然后加上12的除法，这样就可以获得类似的内容。 <div class="gallery col-xs-12 col-sm-12 col-md-4 col-lg-4">（col-md-4表示您正在使用12个增量中的4个用于单个div。您有3个图库div，因此3 X 4 = 12 = col-md-4）这些验证用于不同的屏幕大小的媒体。 以下是每个媒体的引导网格布局：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

//  Extra small devices Phones (<768px) = .col-xs
//  Small devices Tablets (≥768px)      = .col-sm
//  Medium devices Desktops (≥992px)    = .col-md
//  Large devices Desktops (≥1200px)    = .col-lg

通过查看我的例子，class =＆＃34; col-xs-12＆＃34;在手机上，我们会得到一个width=100%;的div。其中＆＃34; col-md-4＆＃34;在任何大于992px的媒体分辨率的笔记本电脑顶部和桌面上，我们会在width=33.33%;

并排放置div

最好只读一下bootstrap，因为它有点进入这些论坛之一。如果您阅读它并且它是如何工作的，添加和使用它实际上非常简单。

还有Bootply -> Bootstrap online editor，有一些很棒的工具可以帮助你开始使用bootstrap！

希望这会有所帮助......

答案 2 :(得分：1)

请记住，float已从正常文档流程中删除。使用它们时应该clear float。

但我建议你使用flexbox重写你的float代码。在这种情况下，您可以删除float，因为它们将被忽略。演示：

＆＃13;
＆＃13; 
#comments {
  /* specify element as flex-container */
  /* its children will be treated as flex items */
  display: flex;
  /* allow moving elements to next line */
  flex-wrap: wrap;
}

div.gallery {
  margin: 5px;
  border: 2px solid #ccc;
  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;
}
＆＃13; 
<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;heoght:200px;width:100%"></div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以替换此代码。

<div style="background:blue;height:200px;width:100%"></div>

答案 4 :(得分：0)

您的评论容器高度不正确的问题，是不考虑内部节点大小。

请提供评论overflow:hidden;或固定height或minheight

答案 5 :(得分：0)

#footer {
    float:left;
    width:100%;
}
相关问题
最新问题