出现在 DIV 底部的图像答案

【问题标题】：Images to appear at BOTTOM of a DIV出现在 DIV 底部的图像
【发布时间】：2014-04-18 00:51:04
【问题描述】：

我正在尝试在 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>

【问题讨论】：

我认为您的代码没有问题，除了 #container 根本没有高度，因为内容不流畅
因为<li> 的绝对定位在技术上你的 div 是 0px 高。尝试为其设置高度。
谢谢大家，但我实际上在“容器”中有一个高度。代码太长，无法在此处复制粘贴。 “MainDiv”是width:100% and height:600px，“container”是width:980px and height:600px

标签： html css

【解决方案1】：

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

【讨论】：

是的，高度是600px，“container”和“MainDiv”一样。

【解决方案2】：

当您向容器添加高度时，它会将您的 <ul> 移动到 div 的底部。事实上，它总是在 div 的底部，但是因为 div 的高度为 0，所以它看起来不像在它的底部。

http://jsfiddle.net/s5aE3/

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

【讨论】：

该死...有时我很愚蠢...我将相对位置添加到“MainContainer”而不是“Container”。工作正常！谢谢！
没问题。很高兴为您提供帮助！

【解决方案3】：

列表正确定位在容器 div 的底部，但没有任何东西可以为容器 div 提供任何高度。随着容器 div 的高度变为零，列表与容器 div 所在的底部一起放置。

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

编辑：

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

【讨论】：

【解决方案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>

【讨论】：

你测试过这个吗？
是的，刚刚测试过，还是一样。不过感谢您的帮助。