php - CSS:水平溢出DIV

Question

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

但是，如果我在长凳上多放一件元素，只会扰乱整个 table 。我要做的是水平放置一根杆，这样它就可以旋转它，这样就可以在不破坏结构的情况下查看数据库中的其他元素。

代码

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。

如果我最多添加一个 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 .