Question

我认为我的编码是正确的，但我仍然无法将页脚放到页面底部，我真的需要这样做。

结果上的页脚直接显示在标题下面，因为我希望它进入位于div的主body中。

感谢。：）

<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <link type="text/css" rel="stylesheet" href="mobile.css"/>
    </head>

    <body>
        <div id="header">
           <div id="companyname">Shutter Up Photography</div>
           <div id="nav">
               <ul>
                   <li><a href="contactus.html">Contact Us</a></li>
                   <li><a href="experience.html">Experience</a></li>
                   <li><a href="offers.html">Offers</a></li>
                   <li><a href="gallery.html">Gallery</a></li>
                   <li><a href="location.html">Location</a></li>
                   <li><a href="aboutus.html">About Us</a></li>
                   <li><a href="home.html">Home</a></li>
               </ul>
           </div>
       </div>

       <div id="main">
           <div id="content">
               <div class="img">
                   <img src="img_model.jpg"/>
                   <div class="desc">Model Shot</div>
               </div>

               <div class="img">
                   <img src="img_classy.jpg"/>
                   <div class="desc">A classy family shot</div>
               </div>

               <div class="img">
                   <img src="img_father.jpg"/>
                   <div class="desc">A father and his boys</div>
               </div>

               <div class="img">
                   <img src="img_wedding.jpg"/>
                   <div class="desc">Timeless Wedding Shot</div>
               </div>

               <div class="img">
                   <img src="img_mother.jpg"/>
                   <div class="desc">A mother and her children</div>
               </div>

               <div class="img">
                   <img src="img_kid.jpg"/>
                   <div class="desc">Imaginative Kid</div>
               </div>
           </div>
       </div>

       <div id="footer">
           <div id="companyname">Shutter Up Photography</div>
      </div>
    </body>
</html>

This is the result from my coding, I've tried to put the css gallery into the main div, but won't work

This is my css code for it

Answer 1

这是因为你的图像正在浮动，使它们脱离页面流。

试试这个

div div div.img {
  margin: 5px;
  border: 2px solid blue;
  display: inline-block;
  width: 400px;
}

通过删除浮动并替换为内联块，可以将元素保留在页面流中。

编辑 -

HTML -

<div class="img">
    <img/>

</div><div class="img">
    <img/>

</div><div class="img">
    <img/>

</div>

如果您选择使用内联块，请像这样对html进行分层，因为内联块元素会考虑元素之间的空白区域。

** /编辑**

或者如果您希望保留浮动，请创建一个clearfix类并将其附加到父

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

编辑 -

<div id="content" class="clearfix">
    <!-- your floated divs here -->
</div>

Answer 2

添加包含以下CSS属性的包装器，如下面的代码所示。这应该可以解决问题：

＆＃13;

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
}
#main {
  overflow: auto;
  padding-bottom: 150px;
  /* must be same height as the footer */
}
#footer {
  position: relative;
  margin-top: -150px;
  /* negative value of footer height */
  height: 150px;
  border-bottom-style: solid;
  clear: both;
  background-color: #006BFE;
  border: 2px solid red;
  /* remove border, showns for illustration purposes only */
}
div.img {
  margin: 5px;
  display: inline-block;
  width: 400px;
  border: 1px solid blue;  
    padding: 10px;
}
div.img img {
  width: 100%;
  height: auto;
  border: 2px solid #006bFE;  

}
div.desc {
  padding: 15px;
  text-align: center;
}
.somelist {
  list-style-type: square;
  list-style-position: inside;
  float: none;
  line-height: 1.5em;
  background-color: #93dbfe;
}

＆＃13;

<div id="wrap">
  <div id="header">
    <div id="companyname">Shutter Up Photography</div>
    <div id="nav">
      <ul>
        <li><a href="contactus.html">Contact Us</a>
        </li>
        <li><a href="experience.html">Experience</a>
        </li>
        <li><a href="offers.html">Offers</a>
        </li>
        <li><a href="gallery.html">Gallery</a>
        </li>
        <li><a href="location.html">Location</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="home.html">Home</a>
        </li>
      </ul>
    </div>
  </div>

  <div id="main">
    <div id="content">
      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Model Shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A classy family shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A father and his boys</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Timeless Wedding Shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A mother and her children</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Imaginative Kid</div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="companyname">Shutter Up Photography</div>
</div>

＆＃13;

使页脚保持在底部

2 个答案: