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
Post a Comment