Question

我试图在表格单元格中放置一些内容，但它需要符合以下规范。

我添加的内容是：

x *

x是任何数字（即可变长度），而*是一张星星的图片，这将是固定长度的让我们说y px 。我希望此内容在表格单元格中居中显示，x始终为z左侧的*像素。例如，让我们说*宽16px，z是2px（即x与星图之间的2px间距。

我尝试了一个简单的2列布局，我将x向左浮动，将*向右浮动，这有效但不会使两列居中，而是{ {1}}粘贴在表格单元格的左侧，x粘在其右侧。

任何帮助赞赏:)。如果需要，我可以使用JS，但我当然更喜欢HTML / CSS解决方案。

Answer 1

这里以防jsBin到期我将把代码放在答案中。再一次原谅我的草率代码，我真的要睡着了

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
   td { width:300px; height:300px;border:1px solid;position:relative;}
   td img {width:100%;max-width:16px;padding-left:2px}
  .num { float:left}
  .wrapper { margin:0 auto;}
</style>
<script>
   $(function(){
      width = $('.num').width() + 18;
      $('.wrapper').css('width',width.toString() + 'px');
    });
</script>
<table>
  <tr>
    <td>
      <div class="wrapper">
        <div class='num'>1234</div>
        <img src="http://www.wpclipart.com/signs_symbol/icons_oversized/male_user_icon.png">
      </div>
    </td>
  </tr>
</table>

http://jsbin.com/gesajeyiya/1/watch

Answer 2

如果您知道您只显示0到9999的数字，那么您不需要脚本

http://jsbin.com/vagulejaqi/1/watch?html,css,output

  <table id="your-table">
    <tbody>
      <tr>
        <td>
          <div class='cell-inner-wrapper'>
            <div class='my-numbers'>
              9999
            </div>
            <img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
          </div>
        </td>
        <td>
          <div class='cell-inner-wrapper'>
            <div class='my-numbers'>
              1
           </div>
           <img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
          </div>
        </td>
      </tr>
    </tbody>
  </table>


#your-table {
  font-family:monospace;
  font-size:12px;
  width:100%;
  border: 1px solid #000;
}
#your-table td {
  border: 1px solid #000;
  width:50%;
}
.cell-inner-wrapper {
  //12px * 4 + 16px + 2px
  max-width: 66px;
  text-align:center;
}
#your-table td img{
  padding-left: 2px;
  display:inline;
  vertical-align:middle;
}
.my-numbers {
  max-width:48px;
  display:inline;
  line-height:4.5em;
}

2列div布局，右列固定宽度，始终居中

2 个答案: