将div放在包含div的底部

时间:2016-01-08 06:09:15

标签: javascript html css positioning

我在将dT(日期/时间)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,因为它不相关。

4 个答案:

答案 0 :(得分:4)

position:relative添加到#dT元素的父级。只有它是相对的,您才能使用leftrightbottomtop来控制子元素。

<强>更新 对于要使用left添加position:absolute

更改位置的子元素

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

#parentofdT
{
position:relative;
}

#dT
{
position:absolute
}

答案 1 :(得分:1)

使用position:absolute;轻松设置像素:https://jsfiddle.net/1Lsnjou9/

祝你好运。

答案 2 :(得分:0)

你应该添加position:relative或position:absolute属性来制作底部:0px work

 #dT{
        width:inherit;
        bottom: 0px;
        border-top: gray;
        background-color: gray;
        font-size: small;
        position: relative;
    }

答案 3 :(得分:0)

使用位置属性,如位置绝对位置或位置相对位置,以便使用top,left,right,bottom属性