<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. mysql中information_schema.tables字段说明

      1. 获取所有表结构(TABLES) SELECT  *  FROM information_schema.TABLES WHERE  TABLE_SCHEMA='数据库名';  TABLES表: ...

  2. php使用ffmpeg获取上传的视频的时长，码率等信息

    视频上传是程序员在很多时候需要用到的操作,然而上传完视频肯定要获得一些视频的详细信息,php本身是不支持信息获取的 ,所以采用ffmpeg第三方插件 首先你需要下载ffmpeg文件:官网地址:http ...

  3. 学习Electorn（1）——Hello World

    环境 操作系统是Manjaro kde 18.01 按照官网文档:https://electronjs.org/docs 安装node https://nodejs.org/en/download/p ...

  4. (二)如何利用C# Roslyn编译器写一个简单的代码提示/错误检查？

    上一篇我们讲了如何建立一个简单的Roslyn分析项目如分析检查我们的代码. 今天我们主要介绍各个项目中具体的作用以及可视化分析工具. 还是这种截图,可以看到解决方案下一共有三个项目. Analyzer ...

  5. 14-MySQL DBA笔记-运维技巧和常见问题处理

    第14章 运维技巧和常见问题处理 DBA的成长,离不开对各种问题的处理.本章将为读者介绍一些运维技巧和常见问题的处理方法.我们需要意识到,别人的经验代替不了自己的经验,所以,多实践.多处理问题,最终会 ...

  6. python 练习：函数1

    习题: 定义一个方法 func,该func可以引入任意多的整型参数,结果返回其中最大与最小的值. def func(**args): return max(args),min(args) 定义一个方法 ...

  7. .htaccess 转 SAE AppConfig

    新浪的SAE不支持 htaccess,但是他们开发了 AppConfig,可以完全代替 htaccess 的常见功能,AppConfig采用类自然语言的规则描述,还是很人性化的. 这里来写一个短网址的 ...

  8. ASP.NET Core 入门（1）（搭建环境CentOS）

    一.CentOS 7 安装 下载CentOS http://isoredirect.centos.org/centos/7/isos/x86_64/  选择其中下载即可. 下载完成后打开vmware准 ...

  9. java jdbc 链接mysq 测试l 云服务器 和云数据库 mysql DB

    话不多说直接上效果图 下面给出参考代码: package com.humi.db; import java.sql.Connection; import java.sql.DriverManager; ...

  10. 关于__new__和__init__

    关于__new__和__init__ 例如一个类 class Foo(object): def __init__(self): print(1) def __new__(self): print(2) ...