Ebeveyn genişliğini bağımsız olarak birbirinin yanına yerleştirin

Question

Yan yana div'ler yerleştirmek istiyorum. Bu, dinamik olarak oluşturulduğu ve değiştirildiği için div sayısını bilmiyorum. Birçok çocuk div (ve onların genişlik ebeveyn büyüktür) durumunda kaydırma çubuğu olacak bir ebeveyn div sahip olmak istiyorum.

İşte jsFiddle example. Yani, temelde, bu üç sütunun birbirine, yan yana ve ebeveyn divunun altındaki kaydırma çubuğuna sahip olmak istiyorum.

HTML:

<div class="content"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 

CSS:

content { 
    width: 100px; 
    background- color: #355E95; 
    overflow: visible; 
} 

.column { 
    width: 50px; 
    display: inline-block; 
} 

Answer 1

sizin üst div için white-space:nowrap ekleyin.

FIDDLE

Answer 2

Fiddle: http://jsfiddle.net/bdssw/

kullanım float:left;

.column { 
    width: 50px; 
    display: inline-block; 
    float:left; 
} 

Answer 3

kullanım width:auto;

.content { 
    width: auto; 
    background-color: #355E95; 
    overflow:scrolling; 
    position:fixed; 
} 

.column { 
    width: 50px; 
    float:left; 
} 

http://jsfiddle.net/XqSJG/6/

Answer 4

Eğer tüm sütunların 3 sığacak şekilde sargının genişliğini ayarlayarak, kaydırma ve sonra sütunlar için bir sarıcı için bir içerik div kullanmak gerekir (Örneğinizde 150px).

Sütun yapısı, div'in sola kaymasıyla yapılır, ancak üst kapınızın genişliğine doğru kayar, bu durumda ana kapsayıcınız yalnızca 100 pikseldir, bu yüzden içlerine sığmaları için bir sarıcı eklememiz gerekir.

Ayrıca dikey kaydırma istiyorsanız, kabınıza bir yükseklik ayarlamanız gerekir.

Jsfiddle: http://jsfiddle.net/tYnH3/

css:

.content { 
    width: 100px; 
    background-color: #355E95; 
    overflow: auto; 
} 

.content-wrapper { 
    width: 150px; 
} 

.column { 
    width: 50px; 
    float: left; 
} 

html:

<div class="content"> 
    <div class="content-wrapper"> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
    </div> 
</div> 

Answer 5

aşağıdaki JS keman

http://jsfiddle.net/jT6SW/1/

#wrapper 
{ 
float: left; 
height: 150px; 
width: 250px; 
margin: auto; 
border: 1px black solid; 
overflow-y: hidden; 
overflow-x: scroll; 
}