I'm trying to get the "about 15 hours ago" text to the left, but can't seem to get it done. float left doesn't seem to work, and I can't decrease the margin left because then the "3 minutes ago" text will collide with the image.
Here's the html(sorry for the big mess):
<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>
And here's the corresponding 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;
}
Instead of
this:
<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>
Move the comment_footer span INSIDE the comment_text span, so that it wraps around the image as you desire. Then remove the <ul>
and <li>
as they are just getting in your way. You end up with:
<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>
Try changing to the comment section to this:
<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>
精彩评论