0

私は大学のプロジェクトをやっています。スクロール位置を水平から垂直に変更する必要がありますが、うまくいきません。ここでは、PHP と HTML、CSS を使用しています。誰でも私のコードを修正できますか? 私はcssが初めてです。

これは私の現在の出力です：

IMAGE形式の現在の出力

私のコード:

<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>";
?>
4

3 に答える 3

2

私はついに答えを見つけました。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;

最終出力:画像

于 2012-05-27T14:11:24.830 に答える
0

@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;
于 2012-05-27T12:04:26.793 に答える
0

これを試して。

overflow: auto;
overflow-x: hidden;

コードを短くしてください: sscce

于 2012-05-27T11:57:56.647 に答える