Question

我正在制作这个页面但是面对一个非常奇怪的困境，即只要执行php代码就让子div跳过它的父级。我的目标是将4个矩形框保持在父div中。每个矩形子div将每5秒更新一次内容。

我确实尝试将父宽度设置为更宽：900px;没有成功。

将每个矩形子div减小到较小的％或px但没有成功。

我的代码中缺少什么成分？

这是我的CSS：

<style>
html {
background-color: #ffffff;}
body {text-align: center;}

div#head {
margin: 0 auto;
color: #01defe;
}

div#info {
margin: 0 auto;
width: 500px;
color: #000000;
text-align: center;
font-weight: bold;
margin-top: 80px;
margin-bottom: 80px;
}

.table {
width: 500px;
font-size: 45px;
border-collapse: collapse;
}

.table th {
background-color: yellow;
background: -moz-linear-gradient(bottom, #666666, #222222);
background: -webkit-linear-gradient(top, #666666, #222222);
background: -o-linear-gradient(top, #666666,#222222);
background: linear-gradient(top, #666666, #222222);
color: #ffffff;
}

.table tr {
height: 50px;
width: 500px;
font-size: 45px;
color: #000000;
background-color: #ffff00;
border: 2px solid;
}   

.table td {
border: 2px black;
border-style: solid;
}    

div#pi {
margin: 0 auto;
width: 800px;
min-height: 485px;
background:  #85929e;
border-radius: 25px;
padding: 10px 10px 10px 10px;
}

div#pi > div {
width: 45%;
min-height: 200px;
margin: 2%;
border: solid 4px  #66FF00;
border-radius: 25px;
background: white;
float: left;
}

div#pi > div > table#a {
margin: 0 auto;
border: solid red;
color: red;
width: 300px;
height: 200px;
}

div#pi > div > div#up {
font-size: 80px;
color:  #ff6f00;
height: 80px;
width: 300px;
background: #000000;
margin: 0 auto;
margin-top: 10px;
padding: 0 0 10px 0;
border: solid yellow;
}

div#pi > div > div#down {
font-size: 80px;
height: 80px;
width: 95%;
background: #ffffff;
margin-left: 10px;
padding: 0 0 10px 0;
border-radius: 25px;
}

div#clock {
margin: 0 auto;
font-size: 45px;
font-weight: bold;
}

div#foot {
margin: 0 auto;
color: #000000;
background: yellow;
font-size: 30px;
font-weight: bold;
margin-top: 80px;
border-radius: 25px;
border: transparent;
width: 600px;
}
</style>

这是我的HTML：

<body>
<div id="head">
<script type="text/javascript">
var currenttime = '<?php print date("F d, Y H:i:s ", time())?>'
var montharray=new    

    Array("January","February","March","April","May","June","July","August","Sept    ember","October","November","December")
var serverdate=new Date(currenttime)

    function padlength(what){
    var output=(what.toString().length==1)? "0"+what : what
    return output
    }
    function displaytime(){
    serverdate.setSeconds(serverdate.getSeconds()+1)
    var datestring=montharray[serverdate.getMonth()]+"                                  "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" @ "+timestring
}
window.onload=function(){
setInterval("displaytime()", 1000)
}
</script>
<p style="text-align: center; font: bold 50px Times New Roman; color: #000000;"><span id="servertime"></span></p>
</div>

<div id="info">
<script>
function b() {
    $("#info").load("pvk.php #info", function() {
        setTimeout(b, 5000);
    });
}
b();
</script>
<table class="table">
    <tr>
        <th style="width: 50%;">CPU</th>
        <th style="width: 50%;">GPU</th>
    </tr>
    <tr>
        <td style="width: 50%;"><?php echo (exec($a = "cat /sys/class/thermal/thermal_zone0/temp")/1000);?> &#8451;</td>
        <td style="width: 50%;"><?php echo (exec("/opt/vc/bin/vcgencmd measure_temp"));?></td>
    </tr>
</table>
</div>

<div id="clock">
<?php
    $ip = file_get_contents('https://api.ipify.org');
    echo $ip;
?>
</div>

<div id="pi">
<script>
function b() {
    $("#pi").load("pvk.php #pi", function() {
        setTimeout(b, 5000);
    });
}
b();
</script>
<div>
<table id="a">
    <tr><td>CPU</td></tr>
    <tr><td><?php echo (exec($a = "cat /sys/class/thermal/thermal_zone0/temp")/1000);?>&#8451;</td></tr>
</table>
</div>

<div>
<table id="a">
    <tr><td>GPU</td></tr>
    <tr><td><?php echo (exec("/opt/vc/bin/vcgencmd measure_temp"));?></td></tr>
</table>
</div>

<div>
<table id="a">
    <tr><td>GPU</td></tr>
    <tr><td><?php echo (exec("/opt/vc/bin/vcgencmd measure_temp"));?></td></tr>
</table>
</div>

<div>
<table id="a">
    <tr><td>GPU</td></tr>
    <tr><td><?php echo (exec("/opt/vc/bin/vcgencmd measure_temp"));?></td></tr>
</table>
</div>
</div>

<div id="foot"><p style="center;"><a href="http://pvk.ddns.net:49190" style="text-decoration:none; color: #000000;">©</a> 2017 www.pvk.ddns.net <a href="" style="text-decoration:none; color: #000000;">@</a>
<?php
    echo (exec("sudo /usr/bin/python /home/pi/Downloads/www/myip.py"));
?></p>
</div>
</body>

以下是在执行php代码之前页面的显示方式： enter image description here

以下是PHP执行后页面的显示方式： enter image description here

非常感谢您的帮助。

可以在pvk.ddns.net上查看实时页面，直到修复为止。

当PHP代码执行时，Div跳出父div

0 个答案: