html - align divs horizontally inside another div -


i trying append divs horizontally existing div. giving float:left property , added overflow-x:auto. expect parent div width < width of child divs horizontal scroll should appear.but not working desired. want divs in horizontal line div1 div2 div1 div2 div1 div2 div1 div2

here code

<div style="overflow-x:auto;width:100px;height:100px">          <div style="background-color:lavender;float:left">       div1            </div>     <div  style="background-color:lavenderblush;float:left">           div2     </div>      <div style="background-color:lavender;float:left">       div1            </div>     <div  style="background-color:lavenderblush;float:left">           div2     </div>      <div style="background-color:lavender;float:left">       div1            </div>     <div  style="background-color:lavenderblush;float:left">           div2     </div> </div> 

instead of float: left;, use display: inline-block; on inner containers, add

white-space: nowrap; 

to outer container.

https://jsfiddle.net/9c1mrcoe/3/

edit: in fiddle, have cleaned inline styles , used css classes instead.


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -