无法在图像旁边对齐文本

Question

这是我需要实现的结果：

到目前为止，这是我所拥有的：

如您所见，有几个要进行的更新。

我的问题是：

1. /如何获取头像旁边的文本以在头像右侧对齐10px。 目前，它被扔到头像下方 。

2. /我将头像旁边的文字对齐后，如何排列位于最右边的文字？ 我相信我可以创建一个div并向右浮动

我刚入CSS才几天，所以我还是个新手，所以请注意任何细节

这是我的HTML：

    <div class="page">
    <table class="reviewsouter" cellspacing="0" cellpadding="0">
    <tr>
     <td class="reviewleft">
      <div id="reviews">
        <table cellpadding="0" cellspacing="0">
            <tr class="reviewuserinfo">
            <td>
                <div>test</div>
                <img class="avatar" src="/avatar/35274"/>           
            </td>
            </tr>
            <tr class="reviewuserdata">
            <td></td>
            </tr>
        </table>    
      </div>
      </td>
      <td class="reviewright"></td>
    </tr>
    </table>
    </div>

这是我的CSS：

    @CHARSET "UTF-8";
    .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px
    }
    table.reviewsouter .reviewright{
     width:400px
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px 0px 10px 10px;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;    
    }

任何帮助都会很棒。

UPDATE

好的，所以我到现在为止：

这是此div（ reviewuserinfo div）的新HTML：

            <tr class="reviewuserinfo">
            <td width="60px"><img class="avatar" src="/act/avatar/35274"/></td>
            <td>Text2</td>
            <td align="right" style="padding-right:15px">Text3</td>
            </tr>

我现在需要的是向上移动文本，使其从与头像顶部相同的位置开始-基本上与图像头像的顶部水平

Answer 1

您如何看待这个https://jsfiddle.net/2Lzo9vfc/107/

HTML

<div class="page">
  <div class="left">
      <img src="http://placehold.it/50x50" alt="">
      <div class="left-content">
          <h4>Lorem ipsum</h4>
          <p>Posted bla bla</p>
      </div>
  </div>

  <div class="right">
      <p>Joined lorem ipsum</p>
      <p>12 reviews bla lorem ipsum</p>
  </div>
</div>

CSS

 body, h4, p {
    margin: 0;
    padding: 0;
}

.page {
    padding: 20px;
    background: #F0F0F0;
    clear: both;
    display:inline-block;
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.left-content, img {
    display: inline-block;
    vertical-align: middle;

}

Answer 2

如果您仅添加水平单元格并将图像和文本包含在每个单元格中怎么办？