1. <div class=“a”> <div class=“b”>
  3. <div class=“c”>内容内容，很长的内容</div>
  4. </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. 平衡树B树B+树红黑树

    二叉树与二叉查找树的操作是必须要熟练掌握的,接下来说的这些树实现起来很困难,所以我们重点去了解他们的特点. 一.平衡二叉查找树与红黑树 平衡树AVL:追求绝对的高度平衡,它具有稳定的logn的高度,因 ...

  2. springcloud断路器Dashboard监控仪表盘的使用

    断路器Dashboard监控仪表盘的使用 在原有的orderserverfeignhystrix服务中使用 1.增加依赖仓库              <dependency> <g ...

  3. Yii2 基于header 实现接口版本控制

    Yii2 官方给出的方案是基于url的版本控制,但是我们的versoin放在header里面,需要通过header来进行版本控制,实现如下: 首先在基类中实现actions,actions是针对con ...

  4. 如何将Linux的工程原封不动地移植到Windows上面

    习惯在Linux下进行开发.但是由于工作需要,不得不与其他使用Windows的项目组同事对接,同事要求我给出可用的程序,而我只有基于makefile的传统工程. 改动到VS工程上发现一部分头文件在Wi ...

  5. QT实现两条贪吃蛇

    Snake.pro文件 1 #------------------------------------------------- 2 # 3 # Project created by QtCreato ...

  6. Python函数知识点总结

    1.函数的定义2.如何定义一个函数以及函数语法3.函数的调用4.函数的参数(形参,实参)以及参数的传递5.函数的返回值6.变量的作用域7.匿名函数8.嵌套函数和闭包9.装饰器10.函数思维导图 1.函 ...

  7. C++ 获取对象类型

    在入门C++过程中,我们经常会遇到无法判断对象类型的情况. 头文件( VS编译器 ) #include <typeinfo> typeid(对象).name(); 例子: , &b ...

  8. Array+DP leetcode-11.装更多的水

    11. Container With Most Water 题面 Given n non-negative integers a1, a2, ..., an , where each represen ...

  9. IE浏览器下载后台返回的Excel文件，报错400

    问题描述(见下图): 问题分析: 400是后端没有接收到请求 原因是后端高版本的tomcat不会自动对字符串进行转义 所以,前端把参数值进行转义,即encodeURI(string) 问题处理前代码( ...

  10. Oracle创建上下文 SYS_CONTEXT

    Oracle创建上下文 SYS_CONTEXT 1. 系统默认的一些参数 set heading offselect SYS_CONTEXT('USERENV', 'TERMINAL') termin ...