Question

enter image description here

我正试图将“大约15小时前”的文字放到左边，但似乎无法完成。向左浮动似乎不起作用，我无法减少剩余边距，因为“3分钟前”文本将与图像发生碰撞。

这是html（抱歉大乱）：

<div class="comment_column_narrow">
    <div id="comment_title_39" class="comment_title">
        Do you like this song?

        <a href="/comment_titles/39" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
    </div>


    <div class="comment_content">
          <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215"></a>
          <div class="textual_comment_content">
              <div class="comment_text">
                 <span class="name_link">
                     <a href="/profiles/45" class="normal">Justin Meltzer</a>
                 </span>
             Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
              </div>
               <span class="comment_footer">
             <ul>
            <li class="list_style">about 15 hours ago.</li>
         </ul>
           <span>
      </span></span></div></div></div>

这是相应的CSS：

.comment_column_narrow {
    float: left;
    width: 295px;
    margin-right: 5px;
}

.comment_content{
    clear:both;
    padding: 10px 5px;
    border-top:2px solid #E2E2E2;
    border-right:3px solid #E2E2E2;
}

.comment_text{
    line-height: 120%;
}

.comment_image{
    float:left;
    margin-right: 10px;
}

.comment_footer{

}

.comment_footer ul{
   margin-top: 5px;
}

.comment_footer ul li{
    font-size: 10px;
    color:gray;
    float:left;
    margin-right:25px;
}

.list_style{
    list-style:none;
}

.name_link{
     margin-left:-3px;
}

Answer 1

而不是

这样：

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
    <ul>
        <li class="list_style">about 15 hours ago.</li>
    </ul>
</span>

将comment_footer span移动到comment_text范围内，以便根据需要包裹图像。然后移除<ul>和<li>，因为它们正在妨碍您。你最终得到：

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
    <span class="comment_footer">about 15 hours ago.</span>
</div>

Answer 2

尝试更改为评论部分：

    <div class="comment_content">
        <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215"></a>
        <div class="textual_comment_content">
            <div class="comment_text">
                <a href="/profiles/45" class="normal name_link">Justin Meltzer</a>
                Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
            </div>
            <div class="comment_footer">
                about 15 hours ago.
            </div>
        </div>
    </div>

无法将此文本翻到左侧

2 个答案: