使用场景

在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容。在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度;在不超过祖父元素时,自动继承100%的宽度。

DOM结构如下:

	<div class="grantparent">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>

一般处理方法

  • 将子元素设为float或者inline-block,然后再通过js计算子元素的个数和其宽度,从而设置父元素的宽度
  • 不利因素
    • 增加DOM操作
    • js重新设定属性增加渲染重绘次数
    • float在渲染时计算量比较大

纯CSS处理方法

  • 设置父元素的属性

    white-space: nowrap;
    display: inline-block;
  • 设置子元素的属性

    display: inline-block;

CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度的更多相关文章

  1. div+css 布局技巧总计

    一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...

  2. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  3. CSS布局技巧之——各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  4. css布局技巧

    CSS用户界面样式 鼠标样式currsor li{ cursor:pointer: } 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 属性值 描述 default 默认 pointer ...

  5. HTML+CSS布局技巧及兼容问题【阅读季】

    在IE6和IE7中,行高值必须大于字体的2px以上才能保证字体的完整显示或当作为链接时能显示下划线. IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了 边框 ...

  6. Html和CSS布局技巧

    单列布局水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...

  7. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  8. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  9. 史上最全Html与CSS布局技巧

    单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父 ...

随机推荐

  1. Res_Orders_02

    一.燃尽图展示 二.项目进展 1.实现用户名找回 2.css样式嵌入

  2. Google V8编程详解(三)Handle & HandleScope

    上一章简单的演示了一个Helloworld Demo.里面涉及到了V8的一些基本类型和概念,本章将围绕这个Demo对V8的基本类型和相关概念进行讲解. 这里还是先把Demo贴出来便于后面分析: #in ...

  3. oracle常用命令(比较常见好用)

    一.ORACLE的启动和关闭 1.在单机环境下 要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下 su - oracle  a.启动ORACLE系统 oracle>svrmgr ...

  4. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  5. 将golang程序注册为windows服务

    1.go get  bitbucket.org/kardianos/service 2.参考里面的exmaple,就可以了 我承认我有点蛋疼

  6. libsvm参数学习和核函数使用(转载)

    一.参数说明 English libsvm_options: -s svm_type : set type of SVM (default 0) 0 -- C-SVC        1 -- nu-S ...

  7. js中var self=this的解释

    每个函数在定义被ECMAScript解析器解析时,都会创建两个特殊的变量:this和arguments,换句话说,每个函数都有属于自己的this对象,这个this对象是在运行时基于函数的执行环境绑定的 ...

  8. Android 无标题、全屏设置

    一.在主题中设置无标题.全屏 (一):直接设置主题: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  // ...

  9. ZooKeeper设置ACL权限控制

    ZK的节点有5种操作权限:CREATE.READ.WRITE.DELETE.ADMIN 也就是 增.删.改.查.管理权限,这5种权限简写为crwda(即:每个单词的首字符缩写)注:这5种权限中,del ...

  10. centos 安装 maven

    1: 下载 maven    我采用的是 apache-maven-3.3.9-bin.tar.gz http://maven.apache.org/download.cgi 2:  解压  tar ...