父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素

<div class=“a”> <div class=“b”>

<div class=“c”>内容内容,很长的内容</div>
</div></div>

给a设定一个固定宽度,并设定overflow:scroll,使其出现横向滚动条,但文字内容会自动换行,为了不换行,我给c设定white-space:nowrap,虽然达到了效果,可以完整显示内容,并出现滚动条,但实际上a和b的宽度并不会完整包裹c(给a和b设定背景色就能看出),而是与原先设定的宽度一样。有什么办法让a和b的宽度能正常包裹c呢?

原先无法让b完全包裹c,只要给b加上:float: left;让它脱离a的文档流,b的宽度就不受a限制了,即使a设置了滚动条,b的宽度也能自适应了。

http://jsbin.com/zobiyogepo/edit?html,css,output

posted @ 2017-02-07 10:18  seven7seven  阅读(4161)  评论(0编辑  收藏  举报