堆棧內存溢出
  簡體   English   中英

CSS：DIV中的水平溢出

[英]CSS: Overflow in a DIV horizontally

 原文  2014-05-16 02:08:44  5   2    php/ html/ css/ scroll/ overflow

問題描述

我正在開發一個包含div制成的表的應用程序。 根據結果​​數據庫填充div。 如下圖所示。

在此處輸入圖片說明

但是，如果我再把一個物品放在長凳上，只會破壞整個桌子。 我要做的是將一根桿水平放置，以便它可以旋轉，這樣就可以在不弄亂結構的情況下查看數據庫中的其他項目。

在此處輸入圖片說明

碼

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 /////////////
            }

在此處輸入圖片說明

如上圖所示，具有9 div類的Vacina。

如果我最多添加一個div類Vacina，將使表格混亂。

我想要的是插入超過9個div類的Vacina，導致背景div（div類包括所有div）的寬度增加，但是與圖像的顯示方式相同，只需水平放置滾動條以顯示整個div。

2 個解決方案

解決方案1
 0 已采納  2014-05-16 20:01:31

如果我對您的理解正確，則可以嘗試以下操作：

在#fundo ，添加 

white-space: nowrap;

然后我換了float: left; 有： 

display: inline-block;

也許這就是您想要的。


編輯：
好的，我從頭開始構建了一個示例（但是使用javascript，而不是php，我無法測試php atm）： JSFiddle 。
有點混亂，但是如果您願意的話，您應該可以用PHP對其進行編碼。
麻煩您告訴我。


編輯2：
只是為了將其包含在答案中（而不僅僅是其注釋中），最終的解決方案是： 此JSFiddle 。

解決方案2
 0  2014-05-16 23:10:54

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>

卡德內塔 

<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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 水平組織div css 水平顯示圖像 將 div 中的文本水平和垂直居中 如何水平增加此div的背景 如何使用CSS水平對齊 在沒有javascript的情況下滾動帶有溢出的div 水平顯示父div超出頁面寬度 yii2：在打印中水平對齊div嗎？ 為什么 echo 元素只在 div 中水平顯示 使用Bootstrap 4將動態div.card水平居中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM