0

我有一个愚蠢的 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 个字符的推文是有区别的。工具栏相对于其父级没有定位。

4

3 回答 3

0

你必须改进你的 html 结构：

我以这种方式编辑你的 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;
}

希望你喜欢！;)

于 2013-07-13T11:50:13.423 回答
0

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

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

.tweet .tools
{
    clear: both;
    position:relative;
    margin-bottom: 80px; 
    margin-left: 15px;
}
于 2013-07-13T11:07:12.017 回答
0

如果你想tools相对放置 div，你应该尝试给float:right. 否则，如果位置是固定的 - 试试这个解决方案

于 2013-07-13T11:14:59.683 回答