<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. [MA] 有关 Likelihood

    当提到 Linear Regression 或是 Logistic regression 等关键词时,都会涉及一个概念,叫做 Likelihood Function 以及 Maximum Likeli ...

  2. Python创建线程

    Python 提供了 _thread 和 threading 两个模块来支持多线程,其中 _thread 提供低级别的.原始的线程支持,以及一个简单的锁,正如它的名字所暗示的,一般编程不建议使用 th ...

  3. SAS学习笔记37 宏程序中parmbuff选项

    该选项用于指定宏可以接受可变参数列表,而且参数值保存在SYSPBUFF宏变量中.parmbuff的参数价值,其实就是每次执行宏程序时,可以指定不同数量的参数值,这些宏参数被保存在&syspbu ...

  4. 阿里数据迁移DTS【otter】和阿里巴巴mysql数据库binlog的增量订阅&消费组件 【canal】

    [链接]alibaba/otterhttps://github.com/alibaba/otter https://github.com/alibaba/canal

  5. redis字符串数据类型基本概念和应用场景

    基本概念:1.string类型是redis能与键关联的最简单的数据类型,它是memcached当中仅有的数据类型.2.redis的key名称也是一个字符串,当我们使用字符串类型作为其对应的值时,我们可 ...

  6. pymongo基础使用方法

    本文通过文章同步功能推送至博客园,排版可能会有所错误,敬请见谅! 1.客户端初始化 初始化MongoDB客户端 client = pymongo.MongoClient('localhost',270 ...

  7. R|批量循环处理同一格式文件-csv,txt,excel

    本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/8IfMrSr9xc8_1Y2_9Ne6hg 在一个文件夹下有很多字段一致,格式统一的数据文件(csv,txt ...

  8. （十三）JSON的使用（下）

    (接上一章节) 4.2 使用ajax交互方式 使用ajax的转换思想        A:异步请求在页面中发起,也要在页面中接收数据并展现. B:ajax中的数据不能从作用域中获取,只能从respons ...

  9. （ 十二）Json的使用（上）

    一.什么是JSON 1.1 javaScript中定义对象的几种方式 使用内置对象 自定义对象构造 使用JSON符号  (1)使用内置对象 JavaScript可用的内置对象可分为两种: 1,Java ...

  10. Asp.Net Core 轻松学系列-2从安装环境开始

    Asp.Net Core 介绍     Asp.Net Core是微软新一代的跨平台开发框架,基于 C# 语言进行开发,该框架的推出,意味着微软从系统层面正式进击 Linux 服务器平台:从更新速度开 ...