<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. JMeter接口自动化学习笔记（一）

    实例教程:https://blog.csdn.net/kasijia/article/details/79405815 https://www.cnblogs.com/rd-ddddd/p/95782 ...

  2. VUE创建项目

    Vue Cli项目搭建     vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...

  3. 5-6 c语言之【枚举，联合体，递归】

    今天学习了枚举,联合体,递归,重点在于递归,所以从网上找到了一些递归的题目进行练习,毕竟程序员界流传一句话,会用循环的是人,会用递归的是神,哈哈哈 还是按次序进行梳理,第一个枚举,枚举和宏定义很相似, ...

  4. 导入别的项目到我的eclipse上出现红色感叹号问题

        项目红色感叹号问题问题 一般我们在导入别的项目到我的eclipse上面会发现,项目上面有红色的错误     原因 因为我电脑上的 jdk版本和别人电脑jdk版本不一样,那么对于的jre版本也不 ...

  5. Comet OJ Contest #3

    A:签到. #include<bits/stdc++.h> using namespace std; #define ll long long #define inf 1000000010 ...

  6. WPF 自定义一个控件，当点击按钮是触发到ViewModel(业务逻辑部分)和Xaml路由事件(页面逻辑部分)

    #region - 用于绑定ViewModel部分 - public ICommand Command { get { return (ICommand)GetValue(CommandPropert ...

  7. ES6语法 学习

    ECMAScript 6,也被称为ECMAScript 2015是ECMAScript标准的最新版本.6是语言的一个重要更新,并第一次更新语言由于ES5 2009标准.现在主要JavaScript引擎 ...

  8. 国际化(i18n)学习

    一 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationalization)又称 ...

  9. JS中的兼容性问题

    事件对象兼容        window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.Firefox必须从源处加入event作 ...

  10. js中undefined的几种情况

    1.变量声明且没有赋值: 2.获取对象中不存在的属性时: 3.函数需要实参,但是调用时没有传值,形参是undefined: 4.函数调用没有返回值或者return后没有数据,接收函数返回的变量是und ...