Переполнение div не будет прокручиваться по горизонтали?

Question

Я пытаюсь сделать переполнение переполнения по горизонтали, а не по вертикали, но по какой-то причине, даже если я пытаюсь переполнить-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, чтобы остановить пленку, а затем настроить переполнение правильно:

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


} 

Я надеюсь, что это решить вашу проблему