在右下角的桌子里面的div?

时间:2016-08-23 07:02:44

标签: javascript html css

<td>内部(来自inspect元素):

<td colspan="6" class="google-visualization-orgchart-node google-visualization-orgchart-node-medium google-visualization-orgchart-nodesel">
<div class="col-md-8">Rian Priyanto </div>
<div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="col-md-3"><a href="#"><i class="fa fa-plus"></i></a></div>
</td>

真实代码:

<script type="text/javascript">

  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Parent');

    data.addRows([
      <?php
        foreach ($query as $row) {
           if($row->kode_group >= 1000){$row->kode_group = '';}
           echo '[{v:\''.$row->kode_groups.'\',f:\'<div style="position: relative;width:100%;height:100%;"><div class="col-md-8">'.$row->name.' </div><div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="col-md-3" style="position: absolute !important;top: 0;right: 0px;"><a href="#"><i class="fa fa-plus"></i></a></div></div>\'},\''.$row->kode_group.'\'],';
        }
      ?>
    ]);

    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(data, {allowHtml:true});
  }
</script>

SS:

SS

1中,当文字换行时,<i class="fa fa-plus"></i>位于<td>的右上角,但2当文字只有1行时,它是在中间。

无论内容如何,​​如何让<i class="fa fa-plus"></i>出现在右上角?

注意:

  • <td>是由google orgchart javascript生成的,所以我真的不知道代码在哪里(我不懂js)。
  • 我可能只能编辑<td>内的内容而非<td>本身内容(因此可能无法添加其他<td>,但编辑css仍然可以)。
  • 您可以自由安排div。我想要的只是text align: left + v. align: middle&amp; iconalign: right + v. align: top
  • 如果您想查看该页面,请参阅save page

2 个答案:

答案 0 :(得分:1)

将td的位置样式作为相对和div位置样式应用为绝对值,右上角为0.它将始终位于右上角。

localhost:80

答案 1 :(得分:0)

尝试这样在td&amp;中添加valign top将班级col-md-3添加到text-right

<td colspan="6" valign="top" class="google-visualization-orgchart-node google-visualization-orgchart-node-medium google-visualization-orgchart-nodesel">
<div class="col-md-8">Rian Priyanto </div>
<div class="col-md-1">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="col-md-3 text-right"><a href="#"><i class="fa fa-plus"></i></a></div>
</td>