在<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"> </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"> </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:
在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
仍然可以)。 text
align: left
+ v. align: middle
&amp; icon
为align: right
+ v. align: top
答案 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"> </div>
<div class="col-md-3 text-right"><a href="#"><i class="fa fa-plus"></i></a></div>
</td>