请参考这个 jsfiddle：Google 图表 API 示例
这个 CSS 是否有一些明显的东西可以揭示我如何让图表显示在数据表的右侧而不是它的下方？还是图表位置由 Javascript 控制？你能提供一个解决方案吗？我尝试了各种 CSS 方法从数据表中拆分图表，但没有成功。
该图表确实显示在我的浏览器中，但我无法让它在 jsfiddle 中工作。
（PS Javascript 在上面的 jsfiddle 中——它很长......）
这是HTML：
<!DOCTYPE html>
<head>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/attc.googleCharts.js"></script>
<link rel="stylesheet" type="text/css" href="cs/attcSandbox.css">
</head>
<body>
<div class="mainContent">
<table class="left"
title="Attendance Percentages"
id="AttendancePercentages"
summary="pieDescription"
data-attc-createChart="true"
data-attc-colDescription="pieDescription"
data-attc-colValues="pieValues"
data-attc-location="AttendancePercentagesPie"
data-attc-hideTable="true"
data-attc-type="pie"
data-attc-googleOptions='{"is3D":true}'
data-attc-controls='{"showHide":true,"create":true,"chartType":true}'
>
<thead>
<tr>
<th id="pieDescription">Description</th>
<th id="pieValues">Sessions</th>
<th>%</th>
<th>Other</th>
</tr>
</thead>
<tbody>
<tr>
<td>Present</td>
<td>405</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>Missing</td>
<td>1</td>
<td>0</td>
<td>4</td>
</tr>
<tr>
<td>Authorised Absent</td>
<td>36</td>
<td>7</td>
<td>3</td>
</tr>
<tr>
<td>Unauthorised Absent</td>
<td>1</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Late</td>
<td>30</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
<div class="right" id="AttendancePercentagesPie"></div>
</div>
</body>
</html>
这是CSS：
/* @media screen { */
/* override css in main */
body{
margin-left: 5px; margin-right: 5px;
margin-top:5px;
width:100%;
position:relative;
left:0px;
top:0px;
z-index:0;
background-color:#FFFFFF;
color:#47535E;
font-size:0.7em;
font-family: Calibri, sans-serif;
}
div.left {
border: 2px solid #CFBFAF;
width: 49%;
float: left;
}
div.right {
border: 2px solid #CFBFAF;
width: 49%;
float: right;
}
div.mainContent{
margin-left: 20px; margin-right: 20px;
width:400px;
}
table{
margin-left: auto; margin-right: auto;
width:98%;
border:1px solid #E6E6E6;
border-radius:5px;
box-sizing: border-box;
background-color:#F6F6F6;
border-collapse: collapse;
}
table td,table th{
border:1px solid #E6E6E6;
border-top:1px solid #FFFFFF;
}
table th{
background-color:#FFFFFF;
}
/*attc classes*/
/*attc classes*/
div.attcControls{
width:100%;
border:1px solid #E6E6E6;
border-radius:5px;
box-sizing: border-box;
background-color:#F6F6F6;
}
div.attcControls ul{
overflow:hidden;
padding:2px 2px 2px 2px;
margin:0px;
}
div.attcControls ul li{
margin:0px;
padding:0px 0px 0px 10px;
list-style-type: none;
display: inline;
float:right;
clear:none;
}
div.attcControls ul li a{
border:1px solid #9CDFF7;
border-radius:3px;
box-sizing: border-box;
background-color:#86D6F5;
padding:2px;
color:white;
text-decoration:none;
display:inline-block;
background-image:none;
font-weight:normal;
}
div.attcControls ul li a:hover{
border:1px solid white;
color:#47535E;
}
div.attcControls ul li fieldset{
border:1px solid #9CDFF7;
border-radius:3px;
box-sizing: border-box;
background-color:#86D6F5;
padding:2px;
margin:0px;
color:white;
text-decoration:none;
}
div.attcControls ul li fieldset label{
padding-right:5px;
}
div.attcControls ul li fieldset select{
font-size:1em;
padding:0px;
margin:0px;
}
input.attcEditCheckRadioBoxes{
display: block;
margin-left: auto;
margin-right: auto;
}
/* } */