2012-03-23 9 views
6

Bazı içeriğe sahip bir div, bir sürü başparmak, her zaman yatay olmasını ve herhangi bir taşmanın yatay olarak kaydırılmasını isterim. Divanın yüzde 100 genişliğini almasını isterim, başparmakları bir grup merkezli tutuyordum, bu da sayfa daha geniş olduğunda, ortanca kaldıkları ve ortada kaldıkları grubun kaldığı anlamına geliyor. Jsfiddle'ım var ve neden çalışmıyor olduğunu anlayamıyorum, taşma özelliğinin devralmasına izin vermek yerine her zaman taşmayı ikinci sıraya iter.div içeriklerini dikey olarak kaydırır ve dikey olarak kaydırmaz

http://jsfiddle.net/z5nEQ/1/ o ki keman ve kodudur oluyor:

css:

.box{ 
width:50px;height:100px;border:1px solid black;float:left; 
} 

#container{ 
width:100%; 
height:200px; 
float:left; 
overflow-x:scroll; 
} 

html:

<div align="center" style="width:100%;height:90px;border:1px solid red;"> 

<div id="container"> 

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"> 
</div><div class="box"></div><div class="box"></div><div class="box"></div><div 
class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 
<div class="box"></div> 

</div> 
</div>​ 

bu konuda herhangi bir düşünce? Böyle herhangi bir yardım

+0

: sol ve bunu durumlar bu tür için doğru davranış olduğunu söyleyebilirim. – MarcinJuraszek

cevap

16

yazma için teşekkür ederiz:

.box{ 
    width:50px; 
    height:100px; 
    border:1px solid black; 
    display:inline-block; 
    *dsplay:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    white-space:normal; 
} 
#container{ 
    width:100%; 
    height:200px; 
    float:left; 
    overflow-x:scroll; 
    white-space:nowrap; 
} 

Kontrol Çünkü şamandıranın var bu http://jsfiddle.net/z5nEQ/3/

+0

Yakınlaştırma tam olarak ne yapıyor? – loriensleafs

+0

ve evet tam olarak ne için umuyordum, çok teşekkürler, 3 dakika içinde stack over akışının izin vereceğini kabul ediyorum ... – loriensleafs

+0

IE7 için hack çünkü inline-block ZOOM ekranıyla IE7'de çalışmıyor : ekran gibi satır içi çalışma: satır içi blok – sandeep