如何将工具栏定位在 div 的底部？

Question

我遇到了愚蠢的 div 问题 :) 我正在为课程开发一个类似于 twitter 的网站，但我在定位工具栏时遇到了问题（转发、删除...）

我的推文 div 是这样的：

<div class="tweet">
    <img width="50px" height="50px" src="img/profiles/mannuk.png">
    <p>
        <span>mannuk</span><br>
        This is my first tweet that i've sent with my twitter. RT if you like it #firstTweet
    </p>
    <div class="tools">
        <a href="#retweet">Retweet</a>
        <a href="#delete">Delete</a>
    </div>
</div>

还有css3代码：

.tweet
{
    background-color: #1FCC84;
    border: 1px solid #000000;
    border-radius: 0.5em;
    margin: 2px 0;
    height: 100px;
    font-size: 0.8em;
}

.tweet img
{
    display: block;
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}

.tweet p
{
    display: block;
    padding-left: 5px;
    overflow: hidden;
    margin-top: 5px;
}

.tweet span
{
    font-weight: bold;
    padding-bottom: 8px;
}

.tweet .tools
{
    clear: both;
    position:relative;
    margin-top: 80px; 
    margin-left: 15px;
}

我需要向工具 div 应用一个位置，其原点是推文父 div，但我不知道如何正确执行，因为在大多数情况下，原点从 img 下方开始，但左边距已正确应用。

现在 140 个字符的推文和 20-30 个字符的推文之间存在差异。工具栏没有相对于其父级定位。

Answer 1

几乎明白了...看看我的小提琴http://jsfiddle.net/bb7555/79Uzf/

只需将工具的上边距设置为下边距即可：

.tweet .tools
{
    clear: both;
    position:relative;
    margin-bottom: 80px; 
    margin-left: 15px;
}

Answer 2

如果你想相对放置tools div，你应该尝试给float:right。否则，如果位置是固定的 - 试试 this solution

Answer 3

你必须改进你的 html 结构：

我在 way 中编辑你的 jFiddle

新的 HTML 结构供参考：

<div class="tweet">
  <article class="detail">
      <img width="50px" height="50px" src=""/>
          <h1>mannuk</h1>
          <p>This is my first tweet that i've sent with my twitter. RT if you like it #firstTweet</p>
  </article>
  <div class="tools">
      <a href="#retweet">Retweet</a>
      <a href="#delete">Delete</a>
  </div>
</div>

如您所见，我使用了标准的 HTML5 标签 article。出于语义原因，最好使用它。

然后最好在您的推文中创建 2 个不同的模块： 1-文章->您的推文和信息有效的空间。 2- 工具和操作部分。

使用该结构可以轻松管理 CSS。

新的 CSS 类和 ID

.tweet{
background-color: #1FCC84;
border: 1px solid #000000;
border-radius: 0.5em;
margin: 2px 0;
font-size: 0.8em;
}
.detail img{
padding:10px;
padding-top:5px;
float:left;
}
.detail h1{
padding-top:5px;
font-size:12px;
}
.detail p{
background-color:red;
width:500px;
margin-left:70px;
}
.tools{
margin-left:70px;
margin-bottom:5px;
}

希望你喜欢！ ;)