javascript - 将 div 放置在包含 div 的底部

标签 javascript html css positioning

我在将 dT(Date/Time) div 放置在包含 div 的底部时遇到问题。我尝试设置 bottom: 0px; 无济于事。下面是我正在使用的 html 和 css 代码。

HTML:

      <div class='container'>
          <aside>
              <img id="user-pic" src="images/blank-user.jpg">
              <a href="#">@User_Name</a>
              <div id="trend"><h6>TRENDING</h6></div>

          </aside>
          <section class="main">
          </section>
     </div>

CSS:

    #dT{
        width:inherit;
        bottom: 0px;
        border-top: gray;
        background-color: gray;
        font-size: small;
    }
.container{
    margin-top: 80px;
}
section{
    margin: auto;
    width: 400px;
    clear: left;
    top: 100px;

}
.tweet{
    width: 450px;
    height: 225px;
    background-color: #FFFFFF;
    border: 4px solid #F1433F;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 15px;
    padding: 25px 15px 0px 15px;
}
.tweetContent{
    width: inherit;
    height: inherit;
    margin: 5px 5px 0 5px;
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
}

我的代码中有一些 JQuery 元素我没有提出,因为我不相信它会对 div 的定位产生任何影响。

看起来代码的 jquery 方面可能与它有关,所以就在这里。

更新:删除了 JQuery,因为它不相关。

最佳答案

position:relative 添加到 #dT 元素的父元素。仅当它是相对的时,您才可以使用 leftrightbottomtop 控制子元素。

更新: 并为要使用 left 更改位置的子元素添加 position:absolute

P.S:需要为包含#dT的div添加relative,为#dT添加absolute

#parentofdT
{
position:relative;
}

#dT
{
position:absolute
}

关于javascript - 将 div 放置在包含 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34670539/

相关文章:

JavaScript 提交不起作用

javascript - PhoneGap 内联 PDF

javascript - react 动态 tabindex 创建

javascript - 打破 Promise 链

HTML 表单中的 Javascript 变量

html - 两列,隐藏一列时,另一列展开全宽

javascript - 为什么按钮元素不改变图片?

css - 方形按钮的制作方法

html - 如何在阅读模式下更改表单颜色

javascript - 如果其他 div 的样式处于事件状态,则从一个 div 中删除样式