如何让子元素决定父元素的宽

摘要

移动端这几年的发展可谓突飞猛进。随着移动端市场份额的增加,移动端开发在互联网公司中所占的比重也会越来越大。在移动端屏幕宽度有限的前提下,我们却要应付各种五花八门的布局。在这个过程,有些问题我们会时不时遇到,然而大多数人却总习惯于借助JavaScript来解决问题。曾几何时,笔者也是这“大多数人”中的一员。静下心来仔细思考,笔者越发觉得这个方式不可取。

移动端这几年的发展可谓突飞猛进。随着移动端市场份额的增加,移动端开发在互联网公司中所占的比重也会越来越大。在移动端屏幕宽度有限的前提下,我们却要应付各种五花八门的布局。在这个过程,有些问题我们会时不时遇到,然而大多数人却总习惯于借助JavaScript来解决问题。曾几何时,笔者也是这“大多数人”中的一员。静下心来仔细思考,笔者越发觉得这个方式不可取。

如果是布局问题,我们能否在不借助于JS的情况下而利用CSS完成呢?对于这类问题,笔者多数会给出肯定的答案。

这里列举一个百分之九十九的人都遇到过的布局问题:

在移动端屏幕宽度有限的前提下,用横向滚动展示更多的内容(子元素宽度不固定),面对这种布局你会如何处理?

笔者列出大多数人通用的处理方法:

1、将子元素浮动(float: left;)并在父元素内清除浮动,然后通过JS动态计算所有子元素的宽度和并赋值给父元素(有可能还需加上子元素的外边距、边框等);

2、将子元素转成行内块(display: inline-block;)并给父元素设置字体大小(font-size: 0;)或删除子元素之间的空格和换行,然后通过JS动态计算所有子元素的宽度和并赋值给父元素(有可能还需加上子元素的外边距、边框等);

不管是方法1还是方法2,都有自己的弊端,不仅要设置子元素还要设置父元素,外加JS的动态计算与赋值。这种方式对于JS好的人来说还好,但是对于那些JS基础薄弱的人来说就不备通用性了,更重要的是JS和子元素高度耦合。

因此,我们需要一个更灵活的方法,而且最好不要使用JavaScript。

下面笔者提供一种纯CSS的方法

  1. /* 这里是加给父元素的 */
  2. .parent {
  3.   displayinline-block;
  4.   whitewhite-spacenowrap;
  5.   font-size: 0;
  6. }
  7. /* 这里是加给子元素的 */
  8. .parent .children {
  9.   displayinline-block;
  10. }

希望看到这段代码之后,你可以思考一下其中的原理。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: