0

我正在尝试使 div 溢出水平滚动而不是垂直滚动，但由于某种原因，即使我尝试 overflow-x:scroll 它也只会垂直滚动。

谁能告诉我我哪里出错了，谢谢

<div class="profile_photos_area">
 <?php include('includes/mod_profile/mod_photos/photos.php'); ?>
</div>

照片.php：

<?php
$profile_bits = get_profile_bits();
while ($profile = mysql_fetch_array($profile_bits)) { 
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg", "_starlight.jpg", "_starlight_thumb.jpg", "thumb_pic1.jpg", "thumb_pic2.jpg", "thumb_pic3.jpg", "thumb_pic4.jpg", "thumb_pic5.jpg", "thumb_pic6.jpg", "thumb_pic7.jpg", "thumb_pic8.jpg", "thumb_pic9.jpg", "thumb_pic10.jpg", "thumb_pic11.jpg", "thumb_pic12.jpg", "thumb_pic13.jpg", "thumb_pic14.jpg", "thumb_pic15.jpg", "thumb_pic16.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<a href=\"".$dirname.$curimg."\" rel=\"shadowbox\" title=\"<strong>{$profile['display_name']}'s Photo's</strong>\"><img src='".$dirname.$curimg."' class=\"profile_photos\" width=\"170\" height=\"150\" ></a>";
};
} 
}
?>

CSS：

.profile_photos_area{
    width:82%;
    height:92px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    -ms-overflow-x: scroll; /* IE8 */
    overflow-x: scroll;
    display:inline-block;


}
4

2 回答 2

3

如果包含的 div 有一个设定的宽度（你的宽度是这样的），那么它会尽可能宽，溢出的文本会换行。

您需要使用的是white-space:nowrap停止换行，然后正确设置溢出：

小提琴：http:
//jsfiddle.net/PwVS3/4/

.profile_photos_area{
    width:82%;
    height:92px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    display:inline-block;

    /* relevant stuff */
    -ms-overflow-x: auto; /* IE8 */
    overflow-x: auto;
    -ms-overflow-y: hidden; /* IE8 */
    overflow-y: hidden;
    white-space:nowrap;
}

此解决方案适用于您希望在照片区域中使用的任意数量的照片。但是，您需要自己处理换行符，但这可能不适用于您的情况。

附带说明，overflow:auto除非内容溢出，否则不会显示滚动条。而overflow:scroll无论内容是否溢出，都会显示滚动条。选择你需要的任何东西。

于 2013-04-19T05:25:11.977 回答
0

http://jsfiddle.net/dolours/CQ8YN/ 像这样修改你的html

.inner
{
    width:200%;
}
.profile_photos_area{
    width:100%;
    height:150px;
    margin-right:16px;
    margin-top:50px;
    position:absolute;
    float:left;
    text-align:left;
    padding-left:18px;
    padding-top:10px;
    -ms-overflow-x: scroll; /* IE8 */
    overflow-x: scroll;
    display:inline-block;


}

我希望这能解决你的问题

于 2013-04-19T05:26:07.270 回答