Question

我正在做一个大学项目。我需要将滚动位置从水平更改为垂直，但这不起作用。在这里，我使用PHP和HTML，CSS。任何人都可以修复我的代码吗？我是css的新手。

这是我目前的输出：

My Current Output In IMAGE format

我的代码：

<style>
div.boxx
{
    background-color:#9C0;
    width:150px;
    height:150px;
    margin-left:20px;
    text-align:center;
    float:left;
}

div.boxx:hover
{
    background:#333;
}

div.inside1
{

    width:100px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-top:10px;
    bottom:0px;
    border:solid #666;
    border-width:thin;
}

div.inside2
{

    width:auto;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    text-align:center;
}

div.button1
{
    width:15px;
    height:25px;
    left:85px;
    float:right;
    position:absolute;
    top:0px;
}

table.main_table
{
    margin-left:auto;
    margin-right:auto;
    width:auto;
}

tr.toptr
{
    background:url(images/available_gallary_top.png) no-repeat;
    height:38px;
}

tr.boatamtr
{
    background:url(images/available_gallary_bottam.png) no-repeat;
    height:7px;
}

tr.fulltr
{
    background:url(images/available_gallary_bg.png) repeat-y;
}

div.gal_cantiner
{
    background-color:#09C;
    width:869px;
    margin-left:2px;
    height:152px;
    overflow:auto;
}

input.delet_gal_bt
{
    width:13px;
    height:13px;
    background:url(images/delet_gal_bt.png) no-repeat;
    border:none;
}
input.delet_gal_bt:hover
{
    background:url(images/delet_gal_bt_h.png) no-repeat;
}

input.remove_gal_bt
{
    width:13px;
    height:13px;
    background:url(images/remove_gal_bt.png) no-repeat;
    border:none;
}
input.remove_gal_bt:hover
{
    background:url(images/remove_gal_bt_h.png) no-repeat;
}

span.gallary_date_text
{
    color:#666; 
    font-size:9px;
    line-height:15px;
}


</style>
<?php
session_start();
include "config.php";
error_reporting(0);
echo "<br>";
$crt=0;
$sql= mysql_query("SELECT * FROM new_gallary",$con);
echo "<table class='main_table' border='0' align='center'><tr class='toptr'><td>&nbsp;</td></tr><tr class='fulltr'><td><div class='gal_cantiner' id='gal_cantiner'>";
while($row = mysql_fetch_array($sql))
  {

       echo    "<div class='boxx' id='boxx".$crt."'><div class='inside1'><img src='".$galimg."' width='100' height='100'><div class='button1'><input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/><input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/></div></div><div class='inside2'>".$row['gallary_name']."<br><span class='gallary_date_text'>".$row['gallary_date']."</span></div></div>";

       $crt++;
  }
echo "</div></td></tr><tr class='boatamtr'><td></td></tr></table>";
?>

Answer 1

我终于找到了答案。我在tr中添加了一个新的样式行，它将在循环内部，如下所示：

$l=$l+100;
echo"
    <div class='boxx' id='boxx".$crt."' style="margin-left:".$l."px;margin-top:-160px;">
        <div class='inside1'>
            <img src='".$galimg."' width='100' height='100'>
            <div class='button1'>
                <input type='button' class='delet_gal_bt' onclick='deleted_gallary(".$row['id'].")'/>
                <input type='button' class='remove_gal_bt' onclick='remove_for_gallary(".$row['id'].")'/>
            </div>
        </div>
        <div class='inside2'>".$row['gallary_name'].">
            <br>
            <span class='gallary_date_text'>".$row['gallary_date']."</span>
        </div>
    </div>
";

style="margin-left:".$l."px; margin-top:-160px;

最终输出：Image

Answer 2

试试这个。

overflow: auto;
overflow-x: hidden;

请缩短代码：sscce

Answer 3

@ user1126301您的代码似乎没有任何滚动条。它只使用现有的图像。

您应该在css中添加：

overflow-y: scroll; overflow-x: hidden; padding-right: 5px;
visibility: visible; border: thin solid white; background-color:#336699;
scrollbar-face-color: #336699; scrollbar-3dlight-color: #336699;
scrollbar-base-color: #336699; scrollbar-track-color: #336699;
scrollbar-darkshadow-color: #000; scrollbar-arrow-color: #000;
scrollbar-shadow-color: #fff; scrollbar-highlight-color: #fff;

如何改变溢出？

3 个答案: