我正在创建一个基本网页，但我无法按原样安排它。
它基本上由标题栏、Google 图表和图表下方的一些文本组成。 但是我不知道如何让文本显示在我的谷歌图表下方。 我确信我的 html 编码远非完美。 任何人都可以建议吗？
<html>
<head>
<style type="text/css">
.title {
background: #03a9f4;
text-align: center;
font: bold 30px Roboto;
padding: 10px 0;
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5)}
.chart{
height: 45%;
width: 100%;
position: absolute;
top: 70px;
left: 0px;
display: block;
padding: 0px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: hidden;}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></ script>
<script type="text/javascript">google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([%BattStats
]);
var options =
{
backgroundColor: '#ffffff',
titlePosition: 'out',
legend: {position: 'right'},
hAxis: { textStyle: {fontName: 'Roboto', fontSize: 12, color: '#ff4c4c4c'}},
vAxis: { textStyle: {fontName: 'Roboto', fontSize: 12, color: '#4c4c4c'}},
curveType: 'none',
chartArea:{left:35,top:50,bottom:50,backgroundColor:'white',width:'360'},
colors: ['#4db6ac'],
crosshair: { trigger: 'selection',
orientation: 'horizontal'},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--full page style--!>
<body style="width: 90%;
margin: 0px;
padding: 10px;
display: block;
background-color: #ffffff;">
<!--chart style--!>
<div id="chart_div" class="chart">
In order to show the graphs you need an internet connection.</div>
</body>
<h1 class="title">Statistics</h1>
</head>
</html>
最佳答案
首先，您的 <head>标签不应包含您的整个 body 。将其视为序言，您可以在其中链接其他文档、执行 javascript 设置或预处理或其他工作。
<body>是你的页面内容应该被定义的地方。您的文字应该在 body 标签内。要将文本放在图表下方，您的正文可能如下所示:
<body>
<div id="chart_div" class="chart">
In order to show the graphs you need an internet connection.</div>
<br />
<h1 class="title">Statistics</h1>
</body>
注意文本是如何包含在 <body> 中的还有<br/> . <br/>表示换行符，而在编辑文档时简单地添加换行符则不会。这源于 HTML 在 SML 中的根源，SML 是一种用于排版的标记语言。空白在很大程度上被忽略(在标签之外)。如果您有任何其他问题，请告诉我!
确保您的 </head>出现在你的 <body> 之前!
关于带有谷歌图表的 html 页面布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27681254/