Question

我有一组div，它们生成小型的表格式结构，可以保存一定数量的信息。他们在班级＆＃34; datecontainer ＆＃34;下定义。并且应该像一个子弹点列表一样在一个在另一个之上，例如：

数据集1
数据集2等等。

问题是，在由网页生成后，CSS将它们堆叠在一起，创建了一个只能被描述为邪恶混乱的东西。目前，我的默认测试值中有大约五个这样的数据集。

目前看来，我采取了一种非常强力的方法来初步解决它，这需要10个换行命令。显然这不是一个好方法，所以我想知道是否有可能改变我当前的CSS（如下所示），允许它们与项目符号点列表对齐，而不是一个在另一个上面。< / p>

这是HTML / PHP：

echo "<div id=left-sidebar>";
$xml=simplexml_load_file("XML.xml") or die("Error: Cannot create object");

$id = $_SESSION['P_ID'];

$datequery = "SELECT DISTINCT ProjectDate FROM Dataset WHERE ProjectID = '$id'";
#Validate Query here.

$result = mysqli_query($db,$datequery);
if ($result) {
    while ($row = mysqli_fetch_assoc($result)) {
        $date = $row['ProjectDate'];
        $datasetquery = "SELECT DatasetNo, Filepath FROM Dataset WHERE ProjectDate='$date' AND ProjectID = '$id'";

        $datasetresult = mysqli_query($db, $datasetquery);
        if ($datasetresult) {
            while ($row = mysqli_fetch_assoc($datasetresult)) {
                $setno = $row['DatasetNo'];
                $path = $row['Filepath'];
                CreateDatasetContainer($xml, $id, $path, $setno, $date);
            }
        }
    }
}
echo "<input type=\"submit\" value=\"To add a new dataset for a project, click here\" onclick=\"document.getElementById('ds-pop-up').style.display='block'; document.getElementById('gauze').style.display='block';\"/></div>";
function CreateDatasetContainer($xml, $id, $path, $setno, $date) {
    for ($x=0; $x<count($setno); $x++){
        echo "<div class=datecontainer>
        <div class=\"date\">$date</div>
        <div class=\"dataset\">
        <p><u>Dataset ".$setno."</u></p>
            Filepath: ".$path."<br>
             ";
            if ($xml->syncstat == "Green") {
             echo "Sync Status: <div id=\"circle\" style=background:green></div>";
            }
            else if ($xml->syncstat == "Red") {
             echo "Sync Status: <div id=\"circle\" style=background:red></div>";
            }
            else {
             echo "Sync Status: <div id=\"circle\" style=background:yellow></div>";
            }
            echo "<br>";
            if ($xml->procstat == "Green") {
             echo "Proc Status: <div id=\"circle\" style=background:green></div>";
            }
            else if ($xml->procstat == "Red") {
             echo "Proc Status: <div id=\"circle\" style=background:red></div>";
            }
            else {
             echo "Proc Status: <div id=\"circle\" style=background:yellow></div>";
            }
            echo "<br>
            <form action=\"main.php\" method=\"post\">
                <button type=\"submit\" name=datasetmod value=info id=\"boom\"><img src=img/1469627573_circle-info-more-information-detail-outline-stroke.png></button>
                <button type=\"submit\" name=datasetmod value=edit id=\"boom\"><img src=img/1469627611_hammer_screwdriver.png/></button>
                <button type=\"submit\" name=datasetmod value=destroy id=\"boom\"><img id=\"imgboom\" src=\"img/explosion.gif\"/></button>
                <input type=hidden name=pid value=$_SESSION[P_ID] />
            </form>
     </div></div>"; #About 10 <br> tags went here when I bruteforced it
    }
  }
 ?>

与此同时，违规的CSS就在这里。

.datecontainer{
    vertical-align: middle;
    float: left;
    width: 300px;
    height: 50px;
    display: inline-block;
}

.date{
    border: 4px solid;
    border-color: grey;
    font-size: 20;
}

dataset{
    border: 4px solid;
    border-color: grey;

}

#left-sidebar {
    left:50px;
    position: absolute;
    margin-right: 10px;
    min-width: 400px;
    max-width: 600px;
    width:100%;
    height:800px;
    overflow: scroll;
}

感谢。

编辑：我发现了问题所在。这是HTML / PHP。

<div class=datecontainer>
    <div class=\"date\">$date</div>
</div> <!--EDIT GOES HERE-->

上面的结束div标签需要放在那里，因为它将数据集大小限制在350x50px，这就是创建＆＃34; unholy mess＆＃34;。

Answer 1

你想要的是div通常在css中从该类移除float: left;和display: inline-block;。或者为这些div创建一个没有该位的新类。

Answer 2

首先，您最终会得到多个相同的ID，文档ID应该是唯一的。可以有一个＆＃34;圈＆＃34;例如。

其次你的内联样式应该是样式=＆＃34;背景：红色;＆＃34;，注意双引号。

你的课程也应该有引号，如class =＆＃34; example＆＃34;

修复这些内容后，使用mozilla右键单击页面并选择inspect元素，然后选择CSS并查看需要更改的CSS，此时它有点乱。

我也没有看到id＃left-sidebar在任何地方也被使用过...也许是我的年龄......

程序生成的div将一个堆叠在一起。如何垂直对齐它们？

2 个答案: