CSS img造成麻烦

时间：2013-10-23 14:22:46

标签： html css css-position

我创建了一个非常简单的网页，标题，一些内容和一个页脚。

这是css：

.Footer{
  background-color: rgb(238,238,238);
  bottom: 0px;
  width: 100%;
  max-height: 398px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
}

和HTML：

<div class="Footer">
    <img id="ceinture" src="medias/pictures/ceinture.jpg">

    <div id="About">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

问题：

页脚不在浏览器的底部，但是具有3或4像素的边距，如下所示：

issue screen shot

如果我删除图像（左边的灰色部分）我摆脱了底部边距，否则无法将其删除...

您可以参考here，但预览窗口必须大于768px（由于CSS3媒体查询）

3 个答案:

答案 0 :(得分：0)

只是一些建议。你应该通过改变尺寸和东西找到你喜欢的布局。最好在相对位置布置父元素，然后使用绝对定位显示此容器内的大多数项目。这两个职位的结合将带您进行Web开发。 

<html>
<head>
</head>    
<body>
    <div style="width: 960px; background-color: blue; min-height: 500px; margin: 0 auto; position: relative;">


    </div>

    <div style="position: relative; margin: 0 auto; background-color: red; width: 960px; height: 200px">
    This is your footer, anything in your footer should be absolute positioned. 
    <div style="position: absolute; left:0; bottom:0;">
    I'm sitting on the left of the footer at the bottom. 
    </div>
    </div>

    </body>
    </html>

答案 1 :(得分：0)

以下是工作示例，只需复制和粘贴。

<强> HTML 

<div class="Footer">

<img id="ceinture" src="medias/pictures/ceinture.jpg">
    <div id="About">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

<强>的CSS 

       *{margin: 0;padding: 0;}
.Footer{
  background-color: rgb(238,238,238);
  position: absolute;
  bottom: 0px;
  width: 100%;
  max-height: 398px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
}

答案 2 :(得分：0)

也许就像这样

    <div id="About">
    <img id="ceinture" src="medias/pictures/ceinture.jpg">
      Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. 
      ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, 
      et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut 
      satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
    </div>
</div>

和css 

   *{margin: 0;padding: 0;}
.Footer{
  background-color: rgb(238,238,238);

  bottom: 0px;
  width: 100%;
  min-height: 2000px;
  display: inline-block;
}
.Footer img{
  height: 100%;
  bottom: 0px;
  display: inline-block;
}
.Footer #About{
  width: 20%;
  display: inline-block;
  position: absolute;bottom: 0;
}

如果您希望 div＃About 始终位于底部，请将绝对值更改为固定

相关问题
最新问题