Question

我正在开发一个包含div制作的表的应用程序。根据结果数据库填充div。如下图所示。

enter image description here

然而，如果我在工作台上再放一件物品，只会扰乱整个桌子。我要做的是水平放置一根杆，使其旋转，这样就可以看到数据库中的其他物品，而不会弄乱结构。

enter image description here

代码

CSS



        #fundo {
         display: block;
         height: 550px; 
         margin-left: -3%;
         overflow: scroll;
         overflow-y: hidden;
         width: 1150px;
        }

        .vacina, .dose, .aplicacao {
         background-color: #D3D3D3;
         border-radius: 5px;
         float: left;
         height: 90px;
         margin-top: 6px;
         margin-left: 6px;
         position: relative; 
         width: 100px; 
        }

    .vacina {
    height: 50px;
    }

PHP

include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
 $ds1=mysql_query($sql);


if ($ds1) {
     if (mysql_num_rows($ds1) > 0) {
            $x = 0;

        ///////////////////////////////////////////////
        ////////////////// DIV VACINA /////////////////

            while($linha=mysql_fetch_assoc($ds1)) {
                $x++;

                if(!($linha['nomeVacina'] == "Outras")) {


                            echo "<div class='vacina' id='".$x."'>";
                            echo "<br>".$linha['nomeVacina'];
                            echo "</div>";

                    }

                }
            }

            ///////////////////////////////////////////////
        ////////////////// FIM DIV VACINA /////////////





        ///////////////////////////////////////////////
        ////////////////// DIV DOSE ///////////////////


            for($i = 1; $i < 6; $i++) {
                echo "<br><br><br><br><br><br>";
                echo "<div class='dose'>";

                if($i == 4 || $i == 5) {
                    echo "<br>Reforco";
                }

                else {
                    echo "<br>Dose ".$i;
                }
                echo "</div>";

        ///////////////////////////////////////////////
        ////////////////// FIM DIV DOSE ///////////////






            ///////////////////////////////////////////////
            ////////////////// DIV APLICACAO //////////////

                $z=0;
                for($j = 1; $j <= $x; $j++) {

                    $sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
                        $ds2=mysql_query($sql2);
                    $linha2=mysql_fetch_assoc($ds2);

                    $z++;
                    echo "<div class='aplicacao' id='".$z.$i."'>";

                    if($linha2 == "") {
                        echo "";
                    }

                    else {
                        echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
                    }

                    echo "</div>";
                }

            ///////////////////////////////////////////////
            ////////////////// FIM DIV APLICACAO /////////////
            }

enter image description here

正如你在上一张图片中看到的，有9个div类Vacina。

如果我添加一个div类Vacina最多，会搞砸桌子。

我想要的是插入超过9个div类Vacina导致背景div（div类包括所有div）增加宽度，但是保持图像的方式相同，只是将滚动条水平放置以显示整个格。

Answer 1

如果我理解正确，我会试试这个：

要#fundo，请添加

white-space: nowrap;

我将float: left;替换为：

display: inline-block;

也许这就是你正在寻找的东西。

编辑：
好的，我从头开始构建了一个示例（但是使用javascript，而不是php，我无法测试php atm）：JSFiddle。
它有点乱，但如果你愿意，你应该可以用PHP编写代码。
如果您遇到麻烦，请告诉我。

编辑2：
只是在答案中（不仅仅是在评论中），最终的解决方案是：this JSFiddle。

Answer 2

HTML + PHP

<?php
  include_once("sessao.php");

  if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
    header("Location:index.html");
  }

  else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
    header("Location:funcionario.php");
  }

?>

<html>
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
    <title>Vacina Digital - Cadastrar Vacinação</title>
    <script type="text/javascript" src="template/js/script.js"></script>
    <link rel="stylesheet" href="template/css/reset.css"> 
    <link rel="stylesheet" href="template/css/fonts.css"> 

    <style>

     body {
        background-color:  #fdfdfd;
        overflow-y: auto; 
      }


      #form {

            margin-left: 50px;
            padding-left: 7%;
            padding-top: 50px;
            padding-bottom: 10px;
            margin-right: 50px;
            border: 1px solid #0F935A;
            border-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-box-shadow: 2px 2px 2px #cccccc;
            -webkit-box-shadow: 2px 2px 2px #cccccc;
            box-shadow: 2px 2px 2px #cccccc;
      }

      #form h1 {
          text-align: center;
          margin-right: 150px;
          font-family: "RobotoCondensed";
          font-size: 30px;
      }


    </style>   












  </head>

  <body>

    <?php
        include_once 'menufuncionario.php';
    ?>


    <div id="form">
      <fieldset>
        <?php
            include_once("db.php");
            if(isset($_POST['cns'])) {
              $cns = $_POST['cns'];
              $_SESSION['paciente'] = $cns;
            }
            else{
              $cns = $_SESSION['paciente'];
            }
            $sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM  populacao WHERE codigoCns = ".$cns;

            $ds1=mysql_query($sql);

            if ($ds1) {
              if (mysql_num_rows($ds1) > 0) {



                  $sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
                  $ds2 = mysql_query($sql2);
                  $linha=mysql_fetch_assoc($ds2);


                  $linha2=mysql_fetch_assoc($ds1);
                  $data_nasc = $linha2['data'];

                  $data_nasc=explode("/",$data_nasc);
                  $data=date("d/m/Y");
                  $data=explode("/",$data);
                  $anos=$data[2]-$data_nasc[2];
                  if ($data_nasc[1] > $data[1]) {
                  $anos = $anos-1;
                  } if ($data_nasc[1] == $data[1]) {
                  if ($data_nasc[0] <= $data[0]) {
                  $anos = $anos;

                  } else {
                  $anos = $anos-1;

                  }
                  } if ($data_nasc[1] < $data[1]) {
                  $anos = $anos;
                  }

                  $data2=date("d/m/Y");
                  echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
                  /*echo "

                  <div id='caderneta' style='margin-left:-6%'>
                  ";*/

                  include_once 'caderneta.php';
                  echo "







                  </div>";

              } else {
                  echo "<h1>CNS Inválido</h1><br><br>
                  <center><a href='javascript:window.history.go(-1)'><button  style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
                  ";
              }
            }


      ?>

    </div>




  </body>

</html>

Caderneta

<html>
<head>

<link rel="stylesheet" href="template/css/fonts.css"> 
<style type="text/css">


    #fundo {
    min-width: 800px;
     display: block;
     overflow: scroll;
     overflow-y: hidden;
     margin-left: -3%;
     height: 550px; 

     white-space: nowrap;
    }




    #pinguim, .vacina, .dose, .aplicacao {
        width: 100px; 
        height: 90px; 
        background-color: #D3D3D3; 
        margin-top: 6px;
        margin-left: 6px;
        border-radius: 5px;

        position: relative;
        float: left;
    }




    #pinguim, .vacina {
        height: 50px;

    }

    .vacina, .dose{
        background: green;
        font-family: RobotoCondensed;
        font-size: 14pt;
        text-align: center;

        color: #ffffff;
    }

    .vacina{
        padding-top: -14px;
        line-height: 15px;
    }

    .dose, .aplicacao{
        margin-top: -32px;  
    }

    .dose{
        line-height: 29px; 
    }

    .aplicacao, .fonte {
        font-family: "RobotoLight";
        text-align: center;
    }









</style>
</head>
<body>
    <div id = "fundo">


    <div id = "pinguim">        
    </div>


    <?php
    include_once ("db.php");
    $sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
    $ds1=mysql_query($sql);


    if ($ds1) {
        if (mysql_num_rows($ds1) > 0) {
            $x = 0;
            $k = 0;
            while($linha=mysql_fetch_assoc($ds1)) {
                $x++;

                if(!($linha['nomeVacina'] == "Outras")) {


                        echo "<div class='vacina' id='".$x."'>";
                        echo "<br>".$linha['nomeVacina'];
                        echo "</div>";

                }
            }


            for($i = 1; $i < 6; $i++) {
                echo "<br><br><br><br><br><br>";

                echo "<div class='dose'>";

                if($i == 4 || $i == 5) {
                    echo "<br>Reforco";
                }

                else {
                    echo "<br>Dose ".$i;
                }
                echo "</div>";



                $z=0;
                for($j = 1; $j <= $x; $j++) {

                    $sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
                    $ds2=mysql_query($sql2);
                    $linha2=mysql_fetch_assoc($ds2);

                    $z++;
                    echo "<div class='aplicacao' id='".$z.$i."'>";

                    if($linha2 == "") {
                        echo "";
                    }

                    else {
                        echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
                    }

                    echo "</div>";
                }
            }





            echo"</div>";











        }

    }




    ?>
    </div>

    </div>

</body>
</html>

CSS：水平地在DIV中溢出

2 个答案: