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的新HTML（reviewuserinfo div）：

            <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

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

无法对齐图像旁边的文字

2 个答案: