Question

在所有帖子中，我已经能够找到一个协议，将div放在另一个div中，或者将div放在另一个div的底部，并且建议很好但我找不到任何事情都可以做到。

我的代码是：

<body style="text-align:center; margin:0; padding:0;">
  <div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
    <div>
      <div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
        <div style="float:left; position:relative; left:30px; top:15px">
          <img src="logo.png" width="88" height="38">
        </div>
        <div style="margin-top:15px">
          <h1>Product Form</h1>
       </div>
     </div>
   </div>
 </div>
</body>

我想要做的就是将formtop.png div放在包含div的底部和中心。我可以做其中一个，但我做不到两个。如果我将position:absolute更改为position:relative，则图片会居中，但会过高。当我将它改回绝对时，它恰好位于其包含div的底部，但在IE中它偏离右侧，而在Firefox中它位于页面的左侧。

有什么建议吗？

Answer 1

您可以通过将formtop.png <div>设置为100％宽度并使用CSS将背景图像居中来实现：

<!-- div with the formtop.png background -->
<div style="
   height:75px; 
   width:100%; 
   background:url(formtop.png) no-repeat 50% 0; 
   bottom:0; 
   position: absolute;">

顺便说一句，如果将所有内联样式移动到.css文件中，您的代码将更容易使用和维护：

<div class="formTop">

.formTop {    
    position: absolute;
    bottom: 0;
    left: 0;    

    height: 75px;
    width: 100%;

    /* Set the background image to centered in this element */
    background: url(formtop.png) no-repeat 50% 0;      
}

Answer 2

您是否尝试过使用绝对定位元素的left:0; right:0;技巧？它不适用于IE7和IE6，但它适用于其他浏览器和更高版本。

这是一个示例http://jsfiddle.net/6w6VR/

Answer 3

尽量避免仅用于样式的html元素，因为您可能希望稍后更改样式。

See this example，它使用:after伪类：

div {
    width:100%;
    position: relative;
    background-image: url(header.png);
}

div:after {
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 20px;
    background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
    background-repeat: no-repeat;
    background-position: center 0px;
}

您可以将 header.png 设置为div的背景。

如何将div放在另一个div的底部

3 个答案: