使用CSS清除后，在图像右侧保留文本

Question

使用HTML和CSS我正在尝试显示一个新闻源，其中有图像，标题是日期和文本本身。

在下图中，第一组是实际结果，第二组是我想要达到的结果。

这是代码：

HTML

<div class="news_block">
   <div>
    <img src="images/facebook.png">  
    <p class="title_news_tit"><strong>Title</strong></p>
    <p class="title_news_date"><strong>21-21-2013</strong></p>    
      <p class="title_news_testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis,
             eu tempus dui dapibus. Ut rhoncus vestibulum dignissim.
             Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula.
             Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl,
             vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris
             ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
   </div>
   <div class="clear"></div>   
</div>

CSS

.news_block {
        margin: 20px;
        padding: 10px;
    min-height: 200px;
        background: #F5F5F5;
}

.news_block img {
        float: left;
        padding: 20px;
}

.title_news_testo
{ 
  float: left;
}

.title_news_tit
{
  float: left;
}
.title_news_date
{
  float: right;
}

.clear
{
  clear: both;
}

修改

我在上传的图片上犯了一个错误..在预期的结果中，我希望标题与左边对齐，而日期则在右边。

Answer 1

您已使用大部分标记，清理它并以这种方式运行良好：DEMO

常规提示：将vertical align应用于图片以使其始终对齐 的 CSS

 .news_block {
    margin: 20px;
    padding: 10px;
    min-height: 200px;
    background: #F5F5F5;
}
.news_block img {
    float: left;
    padding-right:15px;
}
.title_news_date {
    float:right;
}

<强> HTML

 <div class="news_block">
    <img src="http://678ielts.com/wp-content/uploads/2012/11/facebooklogo-200x200.gif" style="width:100px;height:100px;vertical-align:middle">
    <div class="text">
        <p> <span class="title_news_tit"><strong>Title</strong></span>
 <span class="title_news_date"><strong>21-21-2013</strong></span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis, eu tempus dui dapibus. Ut rhoncus vestibulum dignissim. Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula. Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl, vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
    </div>
</div>

Answer 2

以下是如何在小提琴上执行此操作：http://jsfiddle.net/dZ2kX/2/

没有必要漂浮所有东西

 .news_block {
    margin: 20px;
    padding: 10px;
    min-height: 200px;
    background: #F5F5F5;
}
.news_block img {
    padding: 20px;
    background:blue;
    width:90px;
    height:90px;
    float:left;
    margin:0 20px 10px 0;
}