<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

父元素设置固定宽度并设置overflow:scroll，如何让子元素撑开父元素的更多相关文章

  1. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  2. [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿

    设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...

  3. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  4. ie6下内容会撑开父级设置好的宽高

    在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...

  5. pages 元素（ASP.NET 设置架构）web.config 详解

    pages 元素(ASP.NET 设置架构)    buffer="[True|False]"   enableEventValidation="[True|False] ...

  6. roleManager 元素（ASP.NET 设置架构），我是因为SSL弱密码（转）

    为角色管理配置应用程序. 此元素是 .NET Framework 2.0 版中的新元素. configuration 元素(常规设置架构)  system.web 元素(ASP.NET 设置架构)   ...

  7. compilation 元素（ASP.NET 设置架构）

    配置 ASP.NET 用于编译应用程序的所有编译设置. <configuration> 元素  system.web 元素(ASP.NET 设置架构)    compilation 元素( ...

  8. authorization 元素（ASP.NET 设置架构）

    authorization 元素(ASP.NET 设置架构) 其他版本 1(共 1)对本文的评价是有帮助 - 评价此主题 [本文档仅供预览,在以后的发行版中可能会发生更改.包含的空白主题用作占位符.] ...

  9. 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Fiddler之打断点

    1..Fiddler可以修改以下请求 --Fiddler设置断点,可以修改HTTP请求头信息,如修改Cookie,User-Agent等 --可以修改请求数据,突破表单限制,提交任意数字,如充值最小1 ...

  2. 【LOJ】#2137. 「ZJOI2015」诸神眷顾的幻想乡

    我居然到了国赛之前才学习怎么做广义后缀自动机 这个题目--意思是--有20个叶子,肯定一条路径都是任意一个叶子为根,一个从某个点往祖先走的路径 这样的话我们可以按照dfs序,从每个节点的父亲那里的后缀 ...

  3. golang以服务方式运行

    golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...

  4. 【Scratch】它跟Mindstorms，有什么区别？

    第197篇文章 老丁的课程 在正式开始这套课程之前,依照老丁的习惯,还是要给大家白话下东西,该怎么学? 本节课,来讲讲我对于学习这个软件(包括和EV3配合起来)的一些看法.同时,也给小朋友们一些编程学 ...

  5. PAT-1015 Reversible Primes (20 分) 进制转换+质数

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  6. hdu 4857 反向拓扑问题

    尤其要注意拓扑的分层问题 不难理解 就是不怎么好想到 拓扑的思路这里就不累述了 #include <iostream> #include <cstdio> #include & ...

  7. 总结一下C++与C#之间的区别

    1,C#不支持多重继承 2.在标准的C#安全代码中不支持指针类型的操作,然而,你却能在微软所谓的“非安全代码”中操作指针类型对象. 3.C#中所有对象都只能通过关键词“new”来创建,C++的“类名_ ...

  8. sping+redis实现消息队列的乱码问题

    使用spring支持redis实现消息队列,参考官方样例:https://spring.io/guides/gs/messaging-redis/ 实现后在运行过程中发现消费者在接收消息时会出现乱码的 ...

  9. Django rest-framework框架-组件之视图

    视图: a. django class Test(View): ... b. rest_framework class Test(APIView): ... c. GenericAPIView 一般不 ...

  10. pycharm2019.2永久激活

    Pycharm2019.2永久激活Pycharm官网在不到两个月内与2019.7.24更新到最新版本pycharm2019.2,不可说更新不快,对于"喜新厌旧"的我怎能错过新版本呢 ...