如何改變溢出？

Question

我正在做一個大學項目。我需要將滾動位置從「水平」更改爲「垂直」，但這不起作用。這裏我使用PHP和HTML，CSS。請問任何人可以修理我的代碼嗎？我對css很陌生。

這是我的電流輸出：

我的代碼：

<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;