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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值