如何在工具栏的底部定位一个工具栏？

Question

我曾与一个愚蠢的div问题:)我正在开发类似Twitter的一门课程一个网站，但我positionating工具栏的问题（转推，删除...）

我的鸣叫格是这样的：

<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的，其原鸣叫父格，但我不知道如何正确地做到这一点的位置，因为在大多数情况下，起源是在img下开始的，但左侧是m argin被正确应用。

现在有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结构：

<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> 

：

我在way

新的HTML结构仅供参考编辑jFiddle

正如你所看到的，我使用了标准的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; 
} 

希望你喜欢！ ;）