在移动端屏幕宽度有限的前提下,使用横向滚动的方式展现更多的内容。在这样的需求下,但愿父元素做为容器,其宽度能够又横向排列资源的总宽度动态撑开,超过祖父元素的宽度;在不超过祖父元素时,自动继承100%的宽度。css
DOM结构以下:spa
<div class="grantparent"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div>
float
或者inline-block
,而后再经过js计算子元素的个数和其宽度,从而设置父元素的宽度设置父元素的属性code
white-space: nowrap; display: inline-block;
设置子元素的属性继承
display: inline-block;