时间戳

首页 > 解决方案 > 在每个 sql 结果后不断添加边距

php - 在每个 sql 结果后不断添加边距

问题描述

我有一个大问题，希望有人可以帮助我，我创建了一个平台，管理员可以在其中响应票证，但是当收到票证时，它会自动生成结果正文的顶部边距。因此，当收到一张新票时，它会增加更多保证金。我添加了屏幕截图以使其更易于理解。抱歉代码乱七八糟：当我接近最后阶段时，我总是优化并使其更安全:)

票务总览` 

<?php
//starten van sessie 
session_start();
//declaratie van sessie variabelen
$status = $_SESSION['account_status'];
if(!isset($_SESSION['username']))
{
    header("Location: ../index.php");    
}else {

    if ($status == '1'){
//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>-</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../css/style.scss" rel="stylesheet" type="text/css"/>
<header class="header">
  <a href="" class="logo">Support</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
  <li><a href="index.php"> Open tickets</a></li>
  <?php if($admin2 == 1) { ?><li><a href="../procces_files/gesloten_tickets.php">Gesloten tickets</a></li><?php }
            if($admin2 == 0) { ?><li><a href="../ticket_aanmaken/index.php">Ticket aanmaken</a></li><?php }
            if($admin2 == 0) { ?><li><a href="../faq/index.php">FAQ</a></li><?php   }?>
            <li><a href="../procces_files/uitloggen.php">Uitloggen</a></li>
  </ul>
</header>
<body>
<div id="lichaam2">
    <img id="flexa-logo3" src="../img/flexa.png" alt="flexamedia logo"/>
 <?php
//if user is a 'admin'
    if($admin2 == 1) {

        //retrieving tickets 'telefonie'
        ?><section id="cat-container"><div id="telefonie"><?php
        //file voor overzicht tickets alle gebruikers
        require('../procces_files/ticket_overzicht_telefonie.php');
        ?></div><?php


        //retrieving tickets 'website-onderhoud'
        ?><div id="website"><?php
        //file voor overzicht tickets alle gebruikers
        require('../procces_files/ticket_overzicht_website.php');
        ?></div><?php


        //retrieving tickets 'ICT-helpdesk'
        ?><div id="ict"><?php
        //file voor overzicht tickets alle gebruikers
        require('../procces_files/ticket_overzicht_ict.php');
        ?></div></section><?php
    }
    //if user is a 'normal user'
    if($admin2 == 0) {
        ?><div id="blok-container2"><?php
        //file voor overzicht tickets per gebruiker
    require('../procces_files/ticket_overzicht_per_gebruiker.php');
    ?></div><?php
    }

?>
</div>
</body>
</html>
<?php }else {
    header('location: ../procces_files/account_niet_geactiveerd.php');
}} ?>

需要获取票证的代码'telefonie'

<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
    $_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');

//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {


$username = $_SESSION['username'];

//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));

?>
<h1>Telefonie</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result)) 
{  
    if ($row['status'] == '0'){
       if ($row['afdeling'] == 'Telefonie'){
    //een table met ticket resultaten
     echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker']   . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php
}else {
    echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>

取票网站

<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
    $_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');

//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {

$username = $_SESSION['username'];

//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));

?>
<h1>Website Onderhoud</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result)) 
{  
    if ($row['status'] == '0'){
       if ($row['afdeling'] == 'Website-onderhoud'){
    //een table met ticket resultaten
     echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker']   . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php

}else {
    echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>

检索票“ict”

<?php
//checkt of een ticket recent is verwijderd, zoja? laat dan tekst zien
if (!isset($_SESSION['message'])){
    $_SESSION['message'] = ' ';
};
if ($_SESSION['message'] == 'Ticket verwijderd') {
?><script>alert('U heeft de ticket verwijderd');</script> <?php
$_SESSION['message'] = ' ';
}
//database configuratie file
require('dbconfig.php');

//admin waarde ophalen
require('../procces_files/admin_waarde_ophalen.php');
//beveiliging dat voorkomt dat 'geen admin' gebruikers dit bestand kunnen uitvoeren en tickets kunnen verwijderen
if ($admin2 == '1') {


$username = $_SESSION['username'];

//verwerking ophalen tickets per gebruiker en voor elke afdeling
$showTicketsQuery = "SELECT * FROM tickets order by id DESC";
$result = mysqli_query($mysqli, $showTicketsQuery) or die(mysqli_error($result));

?>
<h1>ICT-Helpdesk</h1>
<table>
<div class='ticket'><tr><th><b>Ticket NR</b></th><th><b>Naam:</b></th><th><b>Onderwerp</b></th><th><b>Debiteur</b></th><th><b>Acties</b></th></tr>
<?php
while($row = mysqli_fetch_array($result)) 
{  
    if ($row['status'] == '0'){
       if ($row['afdeling'] == 'ICT-Helpdesk'){
    //een table met ticket resultaten
     echo "<tr><td>" . $row['id'] . "</td>" . "<td>" . $row['naam'] . "</td><td>" . $row['onderwerp'] . "</td><td>" . $row['maker']   . "</td><td>" . '<a class="naarticket" onclick="test" href="../procces_files/ticket_verwijder_procces.php?del=' . $row['id'] . '">del</a>' . '<br><a class="naarticket" href="../procces_files/ticket_overley.php?view=' . $row['id'] . '"' . ';>inzien</a>' . '<br><a class="naarticket" href="../procces_files/ticket_status_update.php?sluit=' . $row['id'] . '"' . ';>sluit</a>' . "</td></tr><BR><BR></div>";
}
}}
?>
</table>
<?php


}else {
    echo '<h2 style="color:red;">ACCES DENIED <br>Deze site is beveiligd tegen dit soort dingen :)</h2>';
}
?>


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap');
* {
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  overflow: none;
}
  @media only screen and (max-width: 767px) {

    body {
      background-color: #2d3e56;
      }
    
    #blok-container2 {
      background-color: #2d3e56;
       position: absolute;
       margin-top: 300px;
       width: 90%;
       min-height: 400px;
       color: white;
       margin-left: 20px;

    } 
    .naarticket {
      color: white;
    }
   
    #blok-container-aanmaakform {
      background-color: #2d3e56;
      margin-top: 560px;
      width: 100%;
    } 
    #blok-container-overview {
      background-color: #2d3e56;
      margin-top: 720px;
      width: 100%;
      color: white;
    } 
    #blok-container-faq {
      background-color: #2d3e56;
      margin-top: 180px;
      width: 100%;
      color: white;
      text-align: center;
    } 
    #blok-container-admin-tickets {
    background-color: #2d3e56;
       position: absolute;
       margin-top: 120px;
       width: 90%;
       min-height: 400px;
       color: white;
    }

    .textfield {
     
      width: 90%;
      height: 200px;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
    }
    .verwerkknoppen {
      margin-top: 5px;
      color: white;
    }

    #flex-container {
      display: flex;
      border-bottom: solid grey 1px;
      margin-bottom: 5px;
      padding-bottom: 5px;
    }
    #bijlageinfo {
      float: right;
      overflow:scroll; 
      height:85px;
    }
    #ticketinfos {
      width: 320px;
    }
    form {
      margin-top: 50px;
    }
    #overview-reply-textarea {
      width: 90%;
      height: 50px;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
    }
    #berichten {
      overflow:scroll; height:300px;
    }

    .velden {
      width: 90%;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
      
    }
    #blok-container {
      width: 350px;
     
    }
    
    #blok-container-register {
      width: 350px;
      margin-top: -40px;
       
      
    }
    #flexa-logo {
      width: 150px;
      justify-content: center;
      justify-self: center;
    }
    #flexa-logo-reg {
      width: 150px;
      justify-content: center;
      justify-self: center;
      margin-top: 200px;
      
    }
    #flexa-logo3 {
      display: none;
    }
    #lichaam {
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      height: 500px;
      align-items: center;
      justify-content: center;
    }
    #lichaam2 {
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      height: 30px;
      align-items: center;
      justify-content: center;
    
    }
    .voorwaarde-tekst {
      color: white;
      
    }
    .voorwaarde-link {
      color: white;
      text-decoration-line: underline !important;
    }
    .submitknop {
      background-color: grey;
      color: white;
      width: 140px;
      height: 50px;
      border: none;
      font-size: 20px;
      margin-left: 100px;
      margin-top: 2px;

    }
    .aanmeldtekst {
      color: white;
      text-align: center;
    }
#register {
  color: white;
  text-decoration-line: underline !important;
}
table, th, td {
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: solid grey 1px;



}
th, td {
  padding: 5px;
  
}
th {
  text-align: left;
  
}
#tabel {
  margin-left: 10px;
  margin-right: 10px;
  top: 0;
  bottom: 0;
}

  //deactivatie scrollbars

#ticket2::-webkit-scrollbar { width: 0 !important }
#berichten::-webkit-scrollbar { width: 0 !important }
  


  }
  @media only screen and (min-width: 768px) {

    body {
      background-color: #2d3e56;
   
    }
      #alletickers {
        position: absolute;
        margin-top: 400px;
      }
    
    #blok-container2 {
      background-color: #2d3e56;
      position: absolute;
      margin-top: 270px;
      width: 90%;
      height: 100px;
      color: white;
      justify-content: center;
      justify-self: center;
      display: flex;

    } 
    .naarticket {
      color: white;
    }
   
    #blok-container-aanmaakform {
      background-color: #2d3e56;
      margin-top: 560px;
      width: 100%;
    } 
    #blok-container-overview {
      background-color: #2d3e56;
      margin-top: 1100px;
      width: 100%;
      color: white;
    } 
    #blok-container-faq {
      background-color: #2d3e56;
      margin-top: 180px;
      width: 100%;
      color: white;
      text-align: center;
    } 
    #blok-container-admin-tickets {
    background-color: #2d3e56;
       position: absolute;
       margin-top: 820px;
       width: 90%;
      //  overflow:scroll; 
       min-height: 400px;
       color: white;
      
    }
#cat-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'item1 item2 item3';
  margin-top: 450px;
  z-index: 70;
}
#telefonie {
grid-area: item1;
}
#website {
grid-area: item2;
}
#ict {
grid-area: item3;
}
grid-area: alletickets;
    .textfield {
     
      width: 97.5%;
      height: 200px;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
    }
    .verwerkknoppen {
      margin-top: 5px;
      color: white;
    }

    #flex-container {
      display: flex;
      border-bottom: solid grey 1px;
      margin-bottom: 5px;
      padding-bottom: 5px;
    }
    #bijlageinfo {
      float: right;
      margin-left: 100px;
      overflow:scroll; 
      height:85px;
      min-width: 400px;
    }
    form {
      margin-top: 50px;
    }
    #overview-reply-textarea {
      width: 90%;
      height: 50px;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
    }
    #berichten {
      overflow:scroll; height:700px;
    }

    .velden {
      width: 97.5%;
      margin-left: 10px;
      background-color:#2d3e56 ;
      border-right: none;
      border-left: none;
      border-top: none;
      border-bottom: solid grey 1px;
      color: white;
      padding: 10px;
      font-size: 24px;
      
    }
    #blok-container {
      width: 350px;
     
    }
    
    #blok-container-register {
      width: 350px;
      margin-top: -40px;
       
      
    }
    #flexa-logo {
      width: 150px;
      justify-content: center;
      justify-self: center;
    }
    #flexa-logo-reg {
      width: 150px;
      justify-content: center;
      justify-self: center;
      margin-top: 200px;
      
    }
    #flexa-logo3 {
      display: none;
    }
    #lichaam {
      margin-left: 20px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      height: 500px;
      align-items: center;
      justify-content: center;
    }
    #lichaam2 {
      margin-left: 10px;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      height: 30px;
      align-items: center;
      justify-content: center;
    
    }
    .voorwaarde-tekst {
      color: white;
      
    }
    .voorwaarde-link {
      color: white;
      text-decoration-line: underline !important;
    }
    .submitknop {
      background-color: grey;
      color: white;
      width: 140px;
      height: 50px;
      border: none;
      font-size: 20px;
      margin-left: 100px;
      margin-top: 2px;


    }
    .aanmeldtekst {
      color: white;
      text-align: center;
    }
#register {
  color: white;
  text-decoration-line: underline !important;
}
table, th, td {
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: solid grey 1px;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
#tabel {
  margin-left: 10px;
  margin-right: 10px;
}
  /*deactivatie van scrollbar*/

  #ticket2::-webkit-scrollbar { width: 0 !important }
  #berichten::-webkit-scrollbar { width: 0 !important }
  }

  //css voor mobile + desktop menu
  body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #f4f4f4;
  }
  
  a {
    color: #000;
  }
  
  /* header */
  
  .header {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  
  .header li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #f4f4f4;
  }
  
  .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
  }

这是屏幕截图中的应用程序，正如您在第一个屏幕截图中看到的那样，我们还没有收到新票

点击屏幕截图

在下一个屏幕截图中，我们收到了一张票，它会在顶部自动创建边距。 点击查看屏幕截图

再次收到另一张票后，它在顶部产生了更多的保证金 点击截图

标签： phphtmlcss

解决方案

您正在创建的无效 HTML 在这里导致了您的问题。

这不是marginCSS 意义上的实际情况 - 这是br您放置在不允许的位置的那些元素。

您的代码，减少到必要的位，基本上是

<table>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
<div class='ticket'><tr><th>foobar</th></tr><BR><BR></div>
</table>

如果您使用浏览器的元素检查器查看它基于它创建的 DOM，您可能会看到如下内容（这是来自 Chrome，但其他 HTML5 兼容的浏览器应该处理这个几乎相同）：

<div class="ticket"></div>
<br>
<br>
<div class="ticket"></div>
<br>
<br>
<div class="ticket"></div>
<br>
<br>
<table>
<tbody>
<tr><th>foobar</th></tr>
<tr><th>foobar</th></tr>
<tr><th>foobar</th></tr>
</tbody>
</table>

因此，您需要在此处修复损坏的 HTML。

推荐阅读