html - 无法对齐图像旁边的文本

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;    
    }

任何帮助都会很棒。

更新

好的，我现在已经走到这一步了:

这是我为这个 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;

}