父元素设置固定宽度并设置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

猜你喜欢

转载自blog.csdn.net/weixin_39407291/article/details/90172083
今日推荐