<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. Yii错误异常处理

    目录 背景 web错误处理 console错误处理 背景 当程序中出现不可预期的错误,比如说除0异常,yii会给我们扔出这个异常信息,由于现在都是读写分离,客户端调你的api,都是协商好的数据格式,如 ...

  2. Navicat通过跳板机连接MySQL(2层跳转)

      情景描述,公司开发数据库部署在内网,而且这个开发数据库有连接需要有IP验证,就是只能在内网的某个IP才能连接,所以每次连接都会先连接外网能访问的跳板机,在从跳板机上ssh到内网上的A机器,在从A机 ...

  3. COleVariant类

    COleVariant本质上是一个枚举,用同一种类型来表达不同的子类型.如同boost中的variant. COLeVariant类是对VARIANT结构的封装. VARIANT结构包含两部分.其一是 ...

  4. 基于搜索的贝叶斯网络结构学习算法-K2

    基于搜索的贝叶斯网络结构学习算法-K2 2018-04-05 19:34:18 ItsBlue 阅读数 3172更多 分类专栏: 贝叶斯网络 网络结构学习   版权声明:本文为博主原创文章,遵循CC ...

  5. jacascript 数组

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 数组的增删 第一个数组元素的索引值为 0,第二个索引值为 1,始终递增. 数组可以在头部增加元素arr.u ...

  6. liteide

    /liteide$ bin/liteide Cannot mix incompatible Qt library (version 0x40806) with this library (versio ...

  7. ipp 实现图像空间的转换

    下载:https://software.intel.com/en-us/parallel-studio-xe/choose-download/free-trial-cluster-windows-c- ...

  8. （详细）JAVA使用JDBC连接MySQL数据库(2)- MySQL Connectors

    欢迎任何形式的转载,但请务必注明出处. 本节内容 mysql connectors介绍 下载安装 在java中配置 点击进入官网下载 一.mysql connectors介绍 mysql connec ...

  9. CVE-2019-0213: Apache Archiva Stored XSS

    CVE-2019-0213: Apache Archiva Stored XSS Severity: Low Vendor:The Apache Software Foundation Version ...

  10. sudo命令 sudoers文件

    超级用户权限 # Host alias specification Host_Alias HA = 192.168.1.1, 192.168.1.2 # User alias specificatio ...