0
我是網絡開發新手，我想知道如何在不增加div大小的情況下移動div元素中的文本。我嘗試使用填充，但其他文本由於它錯位（活動日誌下移）。在不增加div元素大小的情況下移動文本
我想在當前狀態下集中對齊文本，並且只使文本「當前狀態」和「活動日誌」變爲粗體而不是下面的文本。
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[],
Itemss=[],
SortedItems=[]
var htmlText='';
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
\t //unsorted array
Itemss=$(json['Items']);
//console.log("ITEMS",Itemss);
//sorted array- date
date.sort(function(a,b) { return a - b;});
// Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log("Sorted Days", date);
Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log(" Sorted ITEMS",Itemss);
////////
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
//sorting the arrays
day_final.sort(function(a,b) { return a - b;});
// console.log("Sorted day_final", day_final);
humid_final.sort(function(a,b) { return a - b;});
//ACTIVITY LOG
var h1 = [10, 20, 30, 40,50,60];
var t1 = [50, 60, 70, 80, 90, 100];
var activ= document.querySelector('.activ');
for(var i=0; i<h1.length;i++){
activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
}
var chart = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'light',
marginBottom: 100
},
title: {
text: ' Ambient Light'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final, //
color: '#9b0000'
}]
});
var chart1 = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'temp&humid',
marginBottom: 100
},
title: {
text: 'Temperature and Humidity'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'Temperature',
data: chanceOfRain_final,
color:'#646569' //
},
{
type:'line',
name:'Humidity',
data: day_final,
color:'#c5050c'
}]
});
var chart2= Highcharts.chart('stacked', {
credits: {
enabled: false
},
chart: {
height: 250,
width: 400,
type: 'column'
},
title: {
text: "Today's Light and Water Sources"
},
xAxis: {
categories: ['Water', 'Light']
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Natural',
data: [7 , 6],
color:'#c5050c'
}, {
name: 'Automatic',
data: [ 3, 4],
color: '#646569'
}]
});
}); //getJSON method
//setTimeout(updat, 3000);
});
$(function dat() {
// console.log("here");
var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var htmlText='';
$.getJSON(url, function (json) {
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>
<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >
\t <div id="currentSatus"><center><b>Current Status<b><center></div>
\t <br>
\t <div id="temp" style=" background: #72D923;height: 50px"><font face='verdana'><center>Temperature<center></font> </div>
\t <div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity<center></font></div>
\t <div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
\t <div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
</div>
<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>
我試着用它打了一點，但注意到，根據上面的代碼，它的行爲不同，這取決於窗口大小。 – Ragxion
我只想讓它在全屏查看時表現得很好 – user8446995
你能說出更好的句子嗎？ 「我試圖在當前狀態下對文本進行集中對齊，並只將文本設置爲」當前狀態「和」活動日誌「，而不是文本下方的文本。」 – Ragxion