如何使列自动换行到新的行/行

时间:2017-02-08 14:40:44

标签: php html css

我有一个运行查询的脚本并重新编译了许多记录。然后,我需要在屏幕上的表格列中显示每条记录。当到达屏幕的右侧时,将下一列包裹到新的行/行上。

我已经读过,可以将每个列放在一个Div中,并使用" display:inline-block" CSS元素。

我可以在这里看到我想要做的一个例子:

enter link description here

如何使用下面的代码复制此内容。

我的代码: CSS

.gridview_inline_block {
    display: inline-block;
}

我的网页代码:

echo "<table border='0' cellspacing='2'>";

while ($row_Audit = mysql_fetch_assoc($Audit)) {
$RoomNo1 = $row_Audit['HistRoom'];
$RoomNo2 = $row_Audit['ValidRoom'];
$UniqueID = $row_Audit['UniqueID'];
$UniqueID2 = $row_Audit['ValidUniqueID'];

if($row_Audit['OutOfService'] == 1) {
    echo "<tr>";

    echo " <div  class=\"gridview_inline_block\"><td id=\"room\" class=\"roomviewOutofService\">
        <a href='13-1-room_edit_status_iframe.php?Room=$RoomNo2' target='_self'>$RoomNo2</a>
    </td></div>";

}elseif($row_Audit['ValidStatus']== 6 ) {
    echo "<div  class=\"gridview_inline_block\"><td id=\"room\"  class=\"roomviewsaved\">
        <a href='15-1-3-room_report_saved_iframe.php?UniqueID=$UniqueID2' target='_self'>$RoomNo2</a>
    </td></div>";

} elseif($row_Audit['HistStatus']== 1 || $row_Audit['PassFail']== 1 && $row_Audit['RepairCode']!= 4) {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"compfaults\">
    <a href='52-1-room_report_faults_iframe.php?UniqueID=$UniqueID' target='_self'>$RoomNo1</a>
</td></div>";

} elseif($row_Audit['HistStatus']== 2 || !empty($row_Audit['RepairDate'])) {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"compfixed\">
    <a href='13-1-4-by_room_repaired_report_iframe.php?UniqueID=$UniqueID' target='_self'>$RoomNo1</a>
</td></div>";

} elseif($row_Audit['PassFail']== 1 && $row_Audit['ValidStatus']!= 6) {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"compfaults\">
    <a href='14-1-room_report_faults_iframe.php?UniqueID=$UniqueID' target='_self'>$RoomNo1</a>
</td></div>";

} elseif($row_Audit['ValidStatus']== 8) {
echo "<div  class=\"gridview_inline_block\"><td id=\"room\"  class=\"roomviewmagentalight\">
    <a href='13-1-5-room_report_due_all1_iframe.php?UniqueID=$UniqueID' target='_self'>$RoomNo2</a>
</td></div>";

} elseif($row_Audit['Status']== 5) {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"roomviewmagenta\">
    <a href='room_report_due_all2_iframe.php?UniqueID=$UniqueID&OverDue=1' target='_self'>$RoomNo2</a>
</td></div>";

} elseif($row_Audit['ValidStatus']== 7  ) {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"roomviewgreen\">
    <a href='14-1-5-room_report_complete_all_iframe.php?UniqueID=$UniqueID2' target='_self'>$RoomNo2</a>
</td></div>";

} elseif($row_Audit['ValidStatus'] === NULL || $row_Audit['ValidStatus'] == "" || $row_Audit['ValidStatus'] == "99") {
echo "<div  class=\"gridview_inline_block\"><td  id=\"room\" class=\"roomviewwhite\">
    $RoomNo2
</td></div>";
echo "</tr>";
}
}
echo "</table>";

非常感谢你的时间。

1 个答案:

答案 0 :(得分:0)

我重写了HTML,现在我只使用了DIV和相同的CSS

<div class="floating-box">                              
<div class="roomviewsaved">
    <a href='test.php?UniqueID=<?php echo $UniqueID;?>' target='_self'><?php echo $RoomNo2;?></a>
</div>
</div>

感谢您的输入。