Question

所以我想将两个div并排放置，而代码中的下面的一个放置在上面的一个中，我不知道为什么。

HTML：

<body>
    <div id="links">
        <h1 id="title">Webcam</h1>
        <?php

            $dateinamen = 'pictures/Live.jpg';
            $timestamp = filemtime($dateinamen);
            $time  = time();
            $diff = $time -$timestamp;

            // Wenn Bild jünger als 10sec
            if ($diff < 10){
                echo "<img src='pictures/Live.jpg'";  
            } 
            else {
                echo "<img src='pictures/oops.jpg'";
            }
        ?> 
    </div>

    <div id="rechts">
        <h2>Ping</h2>
        <?php

            $host1="192.168.1.1";
            exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
            if ($result1 == 0) {
                echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
            }else {
                echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
            }
        ?>
    </div>
</body>

CSS：

#links{
float: left;
width: 50%;
}

#rechts{
    float: right;
    width: 50%;
    margin-top: 7%;
}

还没有发现任何类似的情况，所以我不知道xampp还是其他问题。

编辑 Photo in inspection mode in Google Chrome

Answer 1

您没有关闭PHP代码中使用的img标签。

use <img src='pictures/Live.jpg'>

Answer 2

尝试使用flexbox。

#container {
  display: flex;
}
#links{
  flex: 1;
  background-color: blue;
  height: 500px;
}

#rechts{
  flex: 1;
  background-color: red;
  height: 500px;
}

<body>
  <div id="container">
    <div id="links">
        <h1 id="title">Webcam</h1>
    </div>

    <div id="rechts">
        <h2>Ping</h2>
    </div>
  </div>
</body>

Answer 3

尝试通过清除边距最高的值进行检查：7％；组成这个班

#rechts {
float: right;
width: 50%;
// margin-top: 7%;  remove this line
}

Answer 4

好像我刚被吸引了... 我刚刚切换了两个div（使用Michał Drabik提出的Flexbox解决方案），它起作用了...

div放在上面的div中

4 个答案: