Question

我试图使div溢出滚动而不是垂直滚动，但出于某种原因即使我尝试overflow-x：滚动它只是垂直滚动。

有人可以告诉我哪里出错了，谢谢

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

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


}

Answer 1

如果包含的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将显示滚动条，而不管是否存在溢出的内容。选择你需要的任何东西。

Answer 2

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;


}

我希望这能解决你的问题

div溢出不会水平滚动？

2 个答案: