<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. IP地址 子网掩码 网络地址 主机地址 广播地址

    1.一定要明白各自的概念分别表示什么 IP地址:IP地址是用来识别网络上的设备,因此,IP地址是由网络地址与主机地址两部分所组成. 子网掩码:子网掩码不能单独存在,它必须结合IP地址一起使用.子网掩码 ...

  2. Word 查找替换高级玩法系列之 -- 给数字批量添加空格和下划线

    Word中的查找和替换是一个很强大的功能,很多人都在使用这项功能.查找和替换,顾名思义就是说,查找到符合条件的内容,然后将那些内容替换成我们所需要的内容.下面,我们就通过实例来了解一下查找和替换功能, ...

  3. GB2312 字符集

    <信息交换用汉字编码字符集>是由中国国家标准总局1980年发布,1981年5月1日开始实施的一套国家标准,标准号是GB 2312—1980. GB2312编码适用于汉字处理.汉字通信等系统 ...

  4. TCP三次握手和四次挥手及wireshark抓取

    TCP的三次握手与四次挥手的详细介绍: 三次握手: 第一次握手(SYN=1, seq=x): 客户端发送客户端发送一个 TCP 的 SYN 标志位置1的,指明客户端打算连接的服务器的端口,以及初始序号 ...

  5. 少儿编程 | 02.Scratch编程环境

    上次课程介绍了Scratch的基本概念和一些特点,最后还给出了一些有趣的例子.本次课程介绍Scratch的两种编程环境以及在Scratch官网注册个人账号的步骤. Scratch 3.0的两种编程环境 ...

  6. 深度剖析Kubernetes API Server三部曲 - part 1

    欢迎来到深入学习Kubernetes API Server的系列文章,在本系列文章中我们将深入的探究Kubernetes API Server的相关实现.如果你对Kubernetes 的内部实现机制比 ...

  7. 剑指Offer（4）——替换空格

    题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...

  8. PHP运行机制和原理

    以echo "Hello World";为例 经历五个步骤:1.扫描(scanning):先进行语法分析和词法分析,然后将index.php内容变成一个个语言片段(token ar ...

  9. 经典SQL数据库面试题以及答案—Oracle版本-SQL全部在plsql开发编写-欢迎提问

    Student(Sno,Sname,Sage,Ssex) 学生表 S1:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别 Course(Cno,Cname,T1) 课程表 C1,课程 ...

  10. VBA变量（七）

    变量是一个指定的内存位置,用于保存脚本执行过程中可以更改的值.以下是命名变量的基本规则. 变量名称必须使用一个字母作为第一个字符. 变量名称不能使用空格,句点(.),感叹号(!)或字符@,&, ...