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-文章 - ＆gt;有效推文和你的信息的空间。 2-工具和行动部分。

使用该结构可以很容易地管理CSS。

新CSS CLASS＆amp; 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;
}

希望你喜欢！ ;）

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

3 个答案: