一道关于给DIV按比例分配宽度的面试题
2017-01-30 11:12
274 查看
之前参加某公司的笔试的时候有这么一道题, 要求用CSS3的方式实现下列布局:
可以看得出来这里没有标明任何的宽度是多少, 但有一个值得注意的地方是蓝色块的宽度很明显是红色块宽度的两倍.
当时做这个题是还没有学习CSS3, 所以并不知道怎么做. 而经过最近的学习之后, 了解到了其实可以使用CSS3中的弹性伸缩布局来做, 具体的做法是:
(1) 结构:
(2) 样式:
只需要这么几行简单的代码就可以实现了, 代码具体的含义是: 给#box设置为flex布局, 然后给p1, p2, p3设置以父元素的宽度按照比例为1:1:2的方式分配宽度, 也就是p1和p2宽度为150px, p3的宽度为300px. 而且即便改变了box的宽度之后, p1, p2, p3的宽度比例还是一样, 如果要用传统的css1或css2要实现这种效果就稍显麻烦, 还要涉及计算.
可以看得出来这里没有标明任何的宽度是多少, 但有一个值得注意的地方是蓝色块的宽度很明显是红色块宽度的两倍.
当时做这个题是还没有学习CSS3, 所以并不知道怎么做. 而经过最近的学习之后, 了解到了其实可以使用CSS3中的弹性伸缩布局来做, 具体的做法是:
(1) 结构:
(2) 样式:
只需要这么几行简单的代码就可以实现了, 代码具体的含义是: 给#box设置为flex布局, 然后给p1, p2, p3设置以父元素的宽度按照比例为1:1:2的方式分配宽度, 也就是p1和p2宽度为150px, p3的宽度为300px. 而且即便改变了box的宽度之后, p1, p2, p3的宽度比例还是一样, 如果要用传统的css1或css2要实现这种效果就稍显麻烦, 还要涉及计算.
相关文章推荐
- 用代码验证阿里巴巴的一道关于男女比例的面试题
- 用代码验证阿里巴巴的一道关于男女比例的面试题
- 用代码验证阿里巴巴的一道关于男女比例的面试题
- 关于一道微软面试题的思考
- 一道关于字符串操作的面试题
- 一道关于截取字符串的java面试题
- 关于索引的一道经典面试题(体现效率所在)(转)
- 关于索引的一道经典面试题(体现效率所在)(转)
- 关于一道sql的面试题 (非常精典)
- 一道关于php变量引用的面试题
- 关于《程序员面试宝典》中的一道面试题的答案
- 关于一道google面试题的java算法
- 一道关于宏的面试题及解答
- 关于一道面试题的源代码解答
- 一道关于容器的面试题
- 一道关于 SQLServer 交叉查询的 外企面试题
- 关于一道微软面试题的解答
- 关于FOR循环的一道面试题
- 一道关于静态变量的初始化顺序面试题
- 一道经典的关于Fibonacci数列的面试题(问题)的新想法 -> N阶楼梯问题