Question

我想在DIV结束时添加两个图像（ul，li）。我使用位置ABSOLUTE，RELATIVE和left：0，bottom：0，它就可以了，但它不会保留在div上。

图像显示在“MainDiv”中，而不是“容器”中。

css：

#MainDiv{
  background:url(../img/background.jpg) no-repeat;
  background-size:cover;
  width:100%;
  height:600px;

}

#container{
  width:980px;
  height:600px;
  margin:0 auto;
  position:relative;
  }

#list{
  width:260px;
  height:40px;
  position:absolute;
  left:0;
  bottom:0;
}

#list li{
  width:130px;
  height:40px;
  border:1px solid white;
}

Html：

<div id="MainDiv">
  <div id="container">
    <ul id="list">
      <li id="image1">Example1</li>
      <li id="image2">Example2</li>
    </ul>
  </div>
</div>

Answer 1

绝对定位的元素相对于它的父元素的相应边缘定位......从它的外观来看，你的容器没有任何高度设置......

Answer 2

当您向容器添加高度时，它会将您的<ul>移动到div的底部。实际上，它始终位于div的底部，但由于div的高度为0，因此它看起来并不像它的底部。

http://jsfiddle.net/s5aE3/

#container{
  width:980px;
  margin:0 auto;
  position:relative;
  height: 800px;
}

Answer 3

列表正确定位在容器div的底部，但没有任何东西可以给容器div任何高度。当容器div的高度变为零时，列表将放置在容器div所在的底部。

要将列表放在容器div中，您需要为容器div指定一个高度。通过指定高度样式，或在其中放置一些非绝对定位或浮动的东西。

编辑：

使用具有容器div高度的更新代码，列表位于底部。

Answer 4

尝试将垂直对齐设置为底部。

<style>
            #MainDiv{
          background:url(../img/background.jpg) no-repeat;
          background-size:cover;
        }

            #container{
          width:980px;
          margin:0 auto;
          position:relative;
        }

        #list{
            width:260px;
        height:40px;
        position:absolute;
            left:0;
            bottom:0;
        }

       #list li{
            width:130px;
        height:40px;
        border:1px solid white;
        vertical-align:bottom;
    }
</style>

        <body>
            <div id="MainDiv">

                <div id="container">
                   <ul id="list">
                      <li id="image1>Example1</li>
                      <li id="image2>Example2</li>
                   </ul>
                </div>

            </div>

图像出现在DIV的BOTTOM上

css：

Html：

4 个答案:

http://jsfiddle.net/s5aE3/

编辑：